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计算 机 科学 技术 的 飞速 发 展 为 GIS (地理 信息 系统 ) 提供 了 先进 的 工具 和 手段 ， 使 GIS 
得 到 了 快速 发 展 ， 应 用 日 益 广泛 。 进 入 21 世纪 后 ， 互 联网 技术 的 普及 更 使 GIS 的 发 展 发 生 了 
质 的 变化 ， 互 联网 已 成 为 GIS 新 的 操作 平台 。 互 联网 与 GIS 的 结合 即 Web GIS， 改 变 了 地 理 
信息 的 获取 、 传 输 、 发 布 、 共 享 和 应 用 的 方式 。 在 互联 网 发 布地 理 信息 ， 为 用 户 提 供 空 间 数 
据 浏 览 、 查 询 、 专 题 图 制作 与 空间 分 析 功 能 ， 从 而 实现 地 理 信息 的 操作 与 共享 ,已 经 成 为 GIS 
发 展 的 必然 趋势 。 

Web GIS 概念 的 首次 提出 是 在 1994 年 ， 指 在 互联 网 上 部 署 GIS， 旨 在 解决 匈 余数 据 、 昂 
贵 数据 的 整合 以 及 分 布 处 理 能 力 , 将 利用 新 的 技术 、 市 场 和 决策 系统 来 开启 我 们 的 世界 。Web 
GIS 是 一 个 分 散 式 的 地 理 信息 网 络 服务 ， 可 让 地 理 信息 通过 OGC 标准 和 W3C 的 界面 互相 沟 
通 存 取 ， 凭 借 良好 的 互 操作 性 达到 以 往 需要 庞大 数据 量 才能 实现 的 功能 ， 使 用 者 可 以 随意 使 
用 在 Web GIS 里 的 地 理 空 间 数据 。Web GIS 可 让 各 个 符合 国际 标准 的 地 理 信 息 数据 库 之 间 通 
过 API 方式 沟通 ， 从 而 保证 数据 不 再 局 限于 单一 数据 库 中 ， 可 形成 网 格 数据 库 。Web GIS 是 
人 类 社会 团体 、 组 织 和 民众 协同 合作 所 建立 的 信息 架构 ， 摆 脱 以 往 GIS 只 适用 于 专业 人 士 的 
状况 ， 真 正 地 让 使 用 者 搜索 生活 中 的 各 种 信息 。 

早期 的 Web GIS 虽然 拥有 技术 上 的 先进 性 ， 但 是 推广 至 一 般 用 户 较 为 困难 ， 然 而 由 于 近 
几 年 Web 2.0 Mapping 系统 的 发 展 , 出 现 了 崭新 的 应 用 , 让 以 往 需 要 大 量 数据 才能 实现 的 Web 
应 用 ， 现 在 只 需要 使 用 Web 2.0 网 站 提供 的 API 即 可 实现 。Google、Yahoo!、Microsoft 等 公 
司 纷纷 推出 属于 自己 的 地 图 API， 大 大 降低 了 以 往 开 发 电子 地 图 的 门槛 ， 让 许多 以 Google 
Map、Bing Map 等 电子 地 图 为 显示 底 图 的 应 用 网 站 如 雨后春笋 般 地 发 展 。 例 如 ， 有 显示 性 侵 
害 犯 罪 的 MapSexOffenders.com、 反 映 芝加哥 犯罪 的 www.chicagocrime.org; 结合 照片 与 影像 
的 Flickr 与 Panoramio; 让 使 用 者 创造 属于 自己 的 地 图 ， 并 让 Google Map 和 其 他 网 页 结合 的 
My Map+; 也 有 提供 爱好 旅游 的 使 用 者 通过 系统 机 制 和 blog 分 享 旅游 经 验 ， 期 望 建 立 旅游 社 
群 的 MyTripBook; 提供 飞机 航班 及 时 信息 的 fboweb.com; 结合 天 气 信 息 的 Weather 
Underground; 租房 信息 的 housingmaps.com。 这 些 应 用 都 显示 了 目前 电子 地 图 正 受到 大 家 的 
重视 ， 相 信和 未 来 Web GIS 2.0 会 更 加 莲 勃 发 展 。 

构建 Web GIS 2.0 应 用 是 一 个 系统 工程 ， 包 含 数据 加 工 处 理 、 数 据 存储 管理 、 地 图 制作 、 
地 图 服务 发 布 、 专 题 数据 发 布 、 空 间 分 析 功 能 发 布 以 及 系统 开发 。 在 该 过 程 中 ， 需 要 使 用 多 
个 软件 与 工具 。 这些 软件 与 工具 既 有 商业 的 , 同样 也 有 免费 与 开源 的 。 利 用 开源 软件 构建 Web 
GIS 2.0 应 用 就 是 本 书 介绍 的 主要 内 容 。 

第 1 章 在 简单 回顾 GIS 发 展 历程 之 后 ， 着 重 介绍 Web GIS 的 发 展 以 及 Web 服务 的 重要 
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性 ， 同 时 还 将 介绍 自由 及 开源 软件 以 及 在 使 用 过 程 中 存在 的 优 缺 点 。 最 后 将 介绍 客户 端 开源 
软件 QGIS 的 安装 与 基本 使 用 。 

第 2 章 介绍 Web GIS 的 系统 架构 与 Web 地 图 的 构成 。 此 外 , 还 介绍 用 于 创建 地 理 Web 服务 
的 开源 软件 GeoServer 的 安装 与 基本 应 用 ， 包 括 GeoServer 的 Web 管理 页 面 及 图 层 预览 等 。 

第 3 章 介绍 了 在 自由 及 开源 软件 领域 存储 与 处 理 空间 数据 的 多 种 选择 ， 列 出 了 空间 数据 
常见 的 开放 格式 , 各 种 数据 存储 结构 和 格式 的 优点 。 最 后 以 实践 的 方式 介绍 了 如 何 使 用 QGIS 
与 GDAL 来 处 理 GIS 数据 ， 以 及 如 何在 PostGIS 中 创建 空间 数据 库 并 导入 空间 数据 。 

第 4 章 着 重 介 绍 了 开放 地 理 空间 联盟 制定 的 WMS 规范 。 虽 然 WMS 并 没有 使 用 最 新 的 
技术 ， 却 是 一 个 被 广泛 使 用 的 规范 ， 是 Web GIS 的 基础 。 此 外 ， 还 介绍 了 如 何 结合 QGIS 与 
GeoServer 发 布 带 高 级 符号 的 WMS 服务 。 

第 5 章 介绍 了 地 图 切片 的 利弊 ， 以 及 创建 与 维护 地 图 缓存 的 策略 。 最 后 通过 两 个 实践 演 
示 如 何在 实际 工作 中 创建 地 图 切片 。 

第 6 章 介绍 了 当前 主流 的 Web 地 图 API， 并 着 重 介绍 了 OpenLayers 的 基本 使 用 方法 。 

第 7 章 介绍 了 在 客户 端 负责 绘制 矢量 数据 的 方式 与 方法 。 这 是 当前 Web GIS 的 专题 图 层 
普遍 采用 的 方式 ， 将 所 有 复杂 的 符号 系统 和 地 图 绘制 功能 转移 到 客户 端 ， 使 服务 器 只 需要 提 
供 原 始 的 矢量 数据 和 属性 数据 。 这 意味 着 地 图 引擎 可 以 更 有 效 地 响应 ， 从 而 增强 交互 性 以 及 
提升 性 能 。 

第 8 章 介绍 了 引入 主流 JavaScript 框架 ， 例 如 Dojo、jQuery 等 ， 以 便 增强 Web 地 图 的 用 
户 体验 。 此 外 ， 还 介绍 了 如 何 通过 专题 制图 ， 以 更 丰富 的 形式 展现 空间 信息 。 

第 9 章 介 绍 了 WEFS 及 其 服务 的 发 布 、 访 问 与 应 用 ， 并 介绍 了 如 何 通过 该 服务 实现 基于 
Web 的 空间 数据 编辑 。 

第 10 章 介 绍 了 WCS 服务 规范 及 其 在 多 维 数据 中 的 应 用 ， 以 及 如 何 利用 GeoServer 将 带 
有 时 间 与 高 程 信息 的 多 维 数据 发 布 为 WCS 服务 。 

第 11 章 介绍 了 WPS 及 其 服务 的 发 布 、 访 问 与 应 用 , 并 介绍 了 如 何 通过 WPS 服务 实现 基 
于 Web 的 等 高 线 生 成 以 及 空间 数据 的 处 理 。 

第 12 章 介绍 了 “开放 数据 ”的 不 同 含义 ， 并 介绍 了 开放 数据 OpenStreetMap 及 其 多 种 数 
据 下 载 方法 。 此 外 ， 还 介绍 了 混搭 应 用 及 其 开发 方法 。 

本 书 源 代码 的 下 载 地 址 为 : http://pan.baidu.com/s/1pKSLVVP。 如 果 下 载 有 问题 ， 请 电 
子 邮 件 联系 booksaga@126.com， 邮 件 主题 为 “ 求 Web GIS 原理 与 应 用 开发 源 代 码 ”。 

本 书 除了 封面 署名 作者 之 外 ， 参 与 本 书 编写 的 人 员 还 有 刘 增 良 、 韩 光 瞬 、 唐 大 仕 、 刘 小 
东 、 贺 小 飞 、 李 珍贵 、 陈 艳 玲 、 杨 海 、 唐 伯 旺 、 黄 泽 清 、 李 凤 英 、 仇 诗 良 和 戴 海 燕 等 。 

由 于 编者 水 平 、 经 验 有 限 ， 书 中 肯定 存在 一 些 朴 漏 和 错误 ， 和 希望 能 得 到 广大 读者 的 批评 
和 指正 。 
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从 本 章 可 以 学 习 到 : 


学 ”GIS 的 发 展 

必 Web GIS 及 其 发 展 

加 Web 服务 

部 自由 及 开源 软件 、 开 放 规 范 与 开放 数据 
六 QGIS 的 安装 与 基本 使 用 


二 Web GIS 原理 与 应 用 开发 


随 着 计算 机 、 网 络 和 数据 库 等 技术 的 发 展 ， 以 及 应 用 的 不 断 深 化 ， 地 理 信息 系统 
(Geographic Information System，GIS) 技术 的 发 展 呈 现 出 新 的 特点 和 趋势 ， 基 于 互联 网 的 
Web GIS 就 是 其 中 之 一 。Web GIS 除了 应 用 于 传统 的 国土 、 资 源 、 环 境 等 政府 管理 领域 外 ， 
也 正在 促进 与 老百姓 生活 息息相关 的 车 载 导 航 、 移 动 位 置 服务 、 智 能 交通 、 抢 险 救灾 、 城 市 
设施 管理 、 现 代 物 流 和 大 数据 分 析 等 产业 的 迅速 发 展 。 

本 章 在 简单 回顾 GIS 发 展 历程 之 后 ， 将 着 重 介绍 Web GIS 的 历史 以 及 Web 服务 的 重要 
性 ， 同 时 还 将 介绍 自由 及 开源 软件 (Free and Open Source Software，FOSS) ， 以 及 在 使 用 过 
程 中 存在 的 优 缺 点 。 最 后 将 介绍 一 个 客户 端 开源 软件 QGIS 的 安装 与 基本 使 用 。 本 书 的 后 续 
内 容 在 创建 地 图 服务 与 Web GIS 应 用 时 ， 需 要 大 量 使 用 地 理 空 间 数据 ， 因 此 需要 使 用 QGIS 
来 预览 并 操作 这 些 空间 数据 。 


1.1 ”GIS 的 发 展 


从 一 定 意义 上 讲 , 地 理 信息 系统 是 计算 机 和 信息 系统 技术 在 地 理科 学 中 运用 发 展 的 产物 。 
因此 地 理 信息 系统 不 仅 受 地 理 信息 系统 的 应 用 和 需求 的 推动 ， 同 时 也 受 计算 机 和 信息 科学 技 
术 的 推动 。 

20 世纪 60 年 代 末 ,世界 上 第 一 个 地 理 信息 系统 一 一 加 拿 大 地 理 信息 系统 CGIS) 诞生 ， 
该 系统 主要 用 于 自然 资源 的 管理 和 规划 ， 随后， 美国 哈佛 大 学 研制 出 SYMAP 系统 。 地 理 信 
息 系 统 因 日 益 引 起 各 国政 府 和 科学 家 的 高 度 重视 而 迅速 发 展 。GIS 的 发 展 经 历 了 20 世纪 70 
年 代 的 大 量 试验 开发 阶段 ，20 世纪 80 年 代 的 商业 开发 和 运作 阶段 以 及 20 世纪 90 年 代 以 用 
户 为 主导 的 阶段 。 在 GIS 发 展 初期 ,只 有 地 理 研究 人 员 、 地 质 调查 局 、 土 地 森林 管理 部 门 、 
人 口 调查 等 专业 部 门 和 研究 人 员 对 其 感 兴趣 ， 而 目前 GIS 已 深入 到 政府 管理 、 城 市 规划 、 科 
学 研究 、 资 源 开发 利用 、 测 绘 和 军事 等 广大 的 领域 。 在 21 世纪 ， 地 理 信息 系统 已 远 远 不 是 地 
理学 界 或 测绘 学 领域 的 概念 ， 而 将 成 为 人 们 采集 、 管 理 、 分 析 空 间 数据 ， 共 享 全 球 信息 资源 ， 
为 政府 管理 提供 决策 、 科 学 研究 和 实施 可 持续 发 展 战略 的 工具 和 手段 。 其 内 涵 从 狭义 的 地 理 
信息 系统 〈 管 理 地 理 信 息 的 计算 机 系统 ) 到 更 广泛 的 空间 信息 系统 (Spatial Information 
System) ， 并 逐渐 形成 地 球 信息 科学 (GeoInformatics) 。 

从 20 世纪 60 年 代 以 来 ， 计 算 模式 的 发 展 已 经 经 历 了 从 单机 计算 、 集 中 计算 到 CS 模式、 
B/S 模式 〈 三 层 结构 模式 ) 的 不 同 阶段 ， 现 在 正 处 于 以 Web 服务 (Web Services ) 为 主要 特征 
的 面向 服务 的 计算 模式 。 

就 技术 层面 而 言 ， 地 理 信息 系统 的 发 展 也 经 历 了 四 代 ， 如 图 1.1 所 示 。 从 GIS 中 引入 的 
网 络 技术 方面 来 看 ， 其 中 第 一 代 〈20 世纪 60 年 代 一 80 年 代 中 期 ) 是 以 单机 单 用 户 为 平台 、 
以 系统 为 中 心 ; 第 二 代 〈20 世纪 80 年 代 中 期 一 90 年 代 中 期 ) 开始 引用 网 络 ， 实 现 了 多 机 多 
用 户 的 GIS， 第 三 代 〈20 世纪 90 年 代 中 期 一 21 世纪 初 ) 引入 了 互联 网 技术 ， 开 始 向 以 数据 
为 中 心 的 方向 过 渡 ， 实 现 了 较 低 层次 的 〈 浏 览 型 或 简单 查询 型 ) B/S 结构 ; 第 四 代 〈21 世纪 
初 至 今 ) 引入 了 Web 服务 ， 开 始 了 面向 服务 的 较 高 层次 的 Web GIS 。 
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图 1.1 GIS 的 发 展 


1.2 Web GIS 及 其 发 展 


在 以 前 的 地 理 信 息 系统 中 ， 基 本 上 以 系统 为 中 心 ， 不 同系 统 之 间 壁 垒 比较 分 明 ， 数 据 共 
享 与 服务 共享 困难 。 在 30 多 年 的 时 间 里 ， 形 成 了 许多 GIS 软件 ， 它 们 在 不 同 的 环境 中 独自 发 
展 ， 有 自己 的 文化 背景 、 领 域 背 景 和 技术 背景 ， 形 成 了 自己 的 数据 模型 和 功能 组 织 结构 。 它 
们 在 功能 和 问题 描述 、 实 际 操作 上 差别 甚大 ， 加 上 内 部 空间 数据 组 织 不 同 或 者 互相 保密 ， 形 
成 了 不 同 的 壁垒 ， 为 信息 共享 增加 了 许多 困难 。 

由 于 互联 网 技术 和 Web 技术 的 成 熟 与 大 规模 普及 应 用 ，GIS 开始 面向 传统 行业 和 广大 民 
众 ，Web GIS 开始 出 现 和 发 展 ， 并 逐渐 成 为 GIS 应 用 的 一 种 重要 方式 。 

Web GIS 是 将 Web 技术 应 用 于 GIS 开发 的 产物 ， 是 一 个 交互 式 的 、 分 布 式 的 、 动 态 的 地 
理 信息 系统 ， 是 由 多 台 主 机 、 多 个 数据 库 和 无 数 终端 并 由 客户 机 与 服务 器 (HTTP 服务 器 及 
应 用 服务 器 ) 相连 接 所 组 成 的 。 在 Web GIS 中 ， 空 间 信 息 应 用 主要 采取 的 是 B/S 
(Browser/Server， 浏 览 器 /服务 器 ) 方式 。 

Web GIS 的 基本 思想 就 是 在 互联 网 上 提供 地 理 信息 服务 ， 让 用 户 通过 浏览 器 从 Web GIS 
服务 器 上 获取 地 理 数据 和 地 理 处 理 服务 。Web GIS 使 全 球 范围 内 的 用 户 拥 有 使 用 分 布 式 地 理 
信息 的 能 力 ， 用 户 可 以 从 互联 网 的 任意 一 个 节点 , 通过 Web 浏览 器 访问 或 共享 由 一 个 或 多 个 
Web GIS 服务 器 发 布 的 数据 和 功能 ， 而 不 必 购 买 商业 GIS 软件 。 

Web GIS 的 真正 意义 在 于 ， 它 将 GIS 从 专业 应 用 推 向 了 大 众 化 服务 ， 同 时 为 地 理 信 息 共 
享 提供 了 方便 而 有 效 的 途径 。 


1.2.1 传统 Web GIS 的 不 足 


网 络 技术 及 分 布 式 计算 技术 给 GIS 提供 了 更 好 的 支持 ， 同 时 也 提出 了 更 高 的 要 求 。 随 着 
网 络 信息 基础 设施 和 技术 的 不 断 发 展 与 完善 ， 分 布 式 地 理 信 息 服务 正成 为 人 们 获取 地 理 信 息 
的 主要 手段 。 与 传统 方式 相 比 ， 分 布 式 地 理 信 息 服务 具有 更 广泛 的 访问 范围 、 平 台独 立 性 、 
低 系 统 成 本 、 更 简单 的 操作 等 优点 ， 是 当前 GIS 发 展 的 重要 方向 。 


到 Web GIS 原理 与 应 用 开发 


但 是 ， 在 2005 年 之 前 ， 传 统 的 Web GIS 〈 称 为 Web GIS 1.0) 还 有 相当 多 的 不 足 ， 主 要 
有 如 下 几 点 : 

(1) Web GIS 的 主要 功能 和 应 用 是 用 于 地 图 的 发 布 ， 这 类 系统 基本 上 是 浏览 型 或 功能 相 
对 简单 的 查询 型 系统 。 虽 然 有 少量 对 空间 数据 的 操纵 ， 但 这 种 操纵 的 功能 很 弱 ， 无 法 进行 复 
杂 的 一 体 化 操作 ， 离 全 面 的 互 操作 及 分 布 式 的 地 理 信 息 系 统 的 要 求 还 很 遥远 。 

(2) Web GIS 中 主要 是 服务 器 端 与 客户 端的 通信 ， 由 于 服务 器 端 与 客户 端的 地 位 没有 形 
成 对 等 的 实体 ， 因 而 难以 建立 分 布 式 的 地 理 信息 系统 。 

(3) Web GIS 中 传递 的 数据 主要 是 以 矢量 形式 表达 的 少量 地 图 数据 或 者 是 以 栅 格 形式 表 
达 的 地 图 ， 这 样 的 地 图 数据 在 各 个 应 用 系统 中 的 格式 不 统一 ， 语 义 也 不 统一 。 由 于 缺乏 统一 
的 标准 ， 数 据 的 共享 难以 实现 。 

(4) Web GIS 中 实现 的 操作 ， 在 各 个 系统 中 没有 统一 描述 的 机 制 (虽然 也 有 一 些 系 统制 
定 了 一 定 的 查询 语言 ， 如 GeoSQL， 但 这 不 是 所 有 的 系统 都 采用 的 ) ， 也 没有 对 这 些 操作 和 
服务 提供 注册 和 发 现 的 机 制 ， 因 此 服务 的 共享 难以 实现 。 

(5) Web GIS 还 没有 形成 一 套 有 效 的 集成 机 制 。 新 一 代 的 GIS 要 求 具有 有 效 的 分 布 式 空 
间 、 数 据 管 理 和 计算 ， 包括: 多 用 户 同步 空间 数据 操作 与 处 理 机 制 ， 数 据 、 服 务 代理 和 多 级 
B/S 体系 结构 ， 异 构 GIS 系统 互 连 与 互 操作 ; 空间 数据 分 布 式 存储 与 数据 安全 ， 空 间 数 据 高 
效 压 缩 与 解压 缩 ;， 同时 要 求 强大 的 应 用 集成 能 力 ， 包 括 有 效 的 遥感 、 地 理 信 息 系 统 、 全 球 定 
位 系统 集成 ， 强 大 的 应 用 模型 支持 能 力 ，GIS 与 MIS (管理 信息 系统 ) ， 特 别 是 ERP (企业 
资源 计划 ) 的 有 机 集成 ，GIS 与 OA (办公 自 动 化 ) 的 有 机 集成 ，GIS 与 CAD (计算机 辅助 
设计 ) 的 有 机 集成 ，GIS 与 DCS (决策 支持 系统 ) 的 有 机 集成 ， 有 一 定 实时 能 力 、 微 型 化 、 
嵌入 式 GIS 与 各 类 设备 的 集成 等 。 

综 上 所 述 ，GIS 中 大 量 的 数据 不 断 积 累 、 各 种 层次 的 软件 也 越 来 越 多 ，Web 技术 的 发 展 
给 GIS 提出 了 更 高 的 要 求 ，GIS 的 分 布 式 、 可 互 操 作 性 显得 越 来 越 重要 ， 这 恰恰 是 当前 Web 
GIS 要 着 重 解决 的 问题 ， 这 也 是 新 一 代 〈 即 第 四 代 ) GIS 的 一 个 重要 发 展 方向 。 

这 个 时 期 主要 的 商业 Web GIS 产品 有 MapInfo 公司 的 MapXtreme 产品 系列 、ESRI 公司 
的 IMS 产品 系列 以 及 Intergraph 公司 的 Geomedia Web Map 产品 等 ， 我 国 也 推出 了 Geo-Surf、 
GeoBeans 与 SupperMap IS 等 国产 化 的 Web GIS 产品 。 而 大 型 的 面向 公众 的 Web GIS 门户 网 
站 则 非常 少 ， 在 国外 主要 以 MapQuest 为 代表 ， 在 国内 主要 有 图 形 天 下 〈Go2Map) 和 城市 通 
(ChinaQuest) 。 


1.2.2 ”从 Web 站 点 发 展 为 Web 服务 


随 着 Web 技术 、 组 件 技术 、 分 布 式 系统 等 技术 的 发 展 ， 在 21 世纪 初出 现 了 Web 服务 技 
术 ， 并 逐渐 引起 了 人 们 的 注意 ， 并 成 为 分 布 式 异 构 GIS 进行 互 操作 集成 的 首选 技术 。 

在 Web 应 用 的 不 断 发 展 过 程 中 ， 人 们 发 现在 Web 应 用 和 传统 桌面 应 用 (比如 企业 内 部 
管理 系统 、 办 公 自 动 化 系统 等 ) 之 间 存 在 着 连接 的 鸿沟 ， 人 们 不 得 不 重复 地 将 数据 在 Web 应 
用 和 传统 桌面 应 用 之 间 转 换 ， 这 成 为 了 阻碍 Web 应 用 进入 主流 工作 流 的 一 个 巨大 障碍 。 
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从 1998 年 开始 发 展 的 XML 技术 及 其 相关 技术 已 证 明 可 以 解决 这 个 问题 ， 而 随后 莲 勃 发 
展 的 Web 服务 技术 则 正 是 基于 XML 技术 的 针对 这 一 问题 的 最 佳 〈 在 当时 看 来 ) 解决 方案 。 
Web 服务 的 主要 目标 就 是 在 现 有 的 各 种 异 构 平台 的 基础 上 构筑 一 个 通用 的 、 与 平台 和 语言 无 
关 的 技术 层 ， 各 种 不 同 平 台 之 上 的 应 用 依靠 这 个 技术 层 来 实施 彼此 的 连接 和 集成 。Web 服务 
与 传统 Web 应 用 技术 的 差异 在 于 : 传统 Web 应 用 技术 解决 的 问题 是 如 何 让 人 来 使 用 Web 应 
用 所 提供 的 服务 ， 而 Web 服务 则 要 解决 如 何 让 计算 机 系统 来 使 用 Web 应 用 所 提供 的 服务 。 

将 Web 服务 应 用 于 GIS， 则 可 以 使 传统 的 地 理 信息 系统 由 独立 的 C/S 结构 或 B/S 结构 ， 
实现 到 基于 Web 服务 体系 的 GIS 的 跨越 。 

从 OGC (Open Geospatial Consortium， 开 放 地 理 空 间 信息 联盟 ， 在 1994~2004 年 该 机 构 
名 为 Open GIS Consortium) 制定 的 规范 名 称 中 也 可 以 看 出 向 Web 服务 的 发 展 趋势 ， 从 
OGC01-065: Web Feature Server Implementation Specification 到 OGC02-058: Web Feature 
Service Implementation Specification 〈 如 图 1.2 所 示 ) ， 原 先 用 Server， 后 来 用 Service， 这 实 
际 上 体现 了 从 传统 的 Web GIS 向 Web 服务 观念 的 转变 。 
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图 1.2 传统 Web GIS 与 基于 Web 服务 的 GIS 的 对 比 


1.2.3 从 SOAP 发 展 为 REST 


在 Web 服务 发 展 的 初期 ,， XML 格式 化 消息 的 第 一 个 主要 用 途 是 应 用 于 XML-RPC 协议 ， 
其 中 RPC (Remote Procedure Call， 远 程 过 程 调用 ) 代表 远程 过 程 调 用 。 在 XML 远程 过 程 调 
用 (XML-RPC) 中 ， 客 户 端 发 送 一 条 特定 消息 ， 该 消息 中 必须 包括 名 称 、 运 行 服务 的 程序 以 
及 输入 参数 。 

之 后 为 了 标准 化 ， 跨 平台 又 产生 了 基于 SOAP (Simple Object Access Protocol， 简 单 对 象 
访问 协议 ) 的 消息 通信 模型 。SOAP 是 在 XML-RPC 基础 上 ， 使 用 标准 的 XML 描述 了 RPC 
的 请 求 信息 〈URI 类 /方法 /参数 /返回 值 ) 。 因 为 XML-RPC 只 能 使 用 有 限 的 数据 类 型 种 类 和 
一 些 简 单 的 数据 结构 ，SOAP 能 支持 更 多 的 类 型 和 数据 结构 。 优 点 是 跨 语 言 ， 非 常 适合 异步 
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通信 和 针对 松 耦 合 的 CS， 缺 点 是 必须 在 运行 时 做 很 多 检查 。 

随 着 时 间 的 推移 和 SOAP 的 推广 情况 ， 大 家 很 快 发 现 其 实 世界 上 已 经 存在 了 一 个 最 为 开 
放 、 最 为 通用 的 应 用 协议 ， 那 就 是 HTTP， 使 用 SOAP 的 确 让 进程 间 通 信 变 得 简单 易 用 ， 但 
并 不 是 每 个 厂商 都 愿意 将 自己 的 老 系统 再 升级 为 支持 SOAP， 而 且 SOAP 的 解析 也 并 不 是 每 
种 语言 都 内 置 支持 ， 比 如 JavaScript。 而 HTTP 正好 完美 解决 了 这 个 问题 ， 因 此 可 以 设计 一 种 
使 用 HTTP 协议 来 完成 服务 端 与 客户 端 通信 的 方法 ， 于 是 REST (Representational State 
Transfer， 表 达 性 状态 转移 ) 应 运 而 生 。REST 一 般 用 来 和 SOAP 作 比 较 ， 它 采用 简单 的 URL 
方式 来 代替 一 个 对 象 ， 优 点 是 轻 量 、 可 读 性 较 好 且 不 需要 其 他 类 库 支 持 ， 缺 点 是 URL 可 能 会 
很 长 且 不 容易 解析 。 


1.2.4 ”从 三 层 架 构 发 展 为 多 层 架 构 


早期 的 Web GIS 通常 是 典型 的 三 层 的 B/S 架构 , 如 图 1.3 所 示 , 包括 前 端的 Web 浏览 器 ， 
后 台 Web 服务 器 以 及 数据 服务 器 ， 而 GIS 服务 功能 则 内 棋 在 Web 应 用 程序 中 。 


-二 一 一 一 
E77 4 
web 浏览 器 | Web 服 务 器 | 数据 库 服务 器 
a | 逻辑 层 ! a 
| 《中 辣 层 ) | a 
图 13 典型 的 三 层 Web GIS 架构 图 


但 是 为 了 在 更 大 程度 上 方便 地 理 信息 数据 及 GIS 功能 的 共享 ， 以 及 方便 二 次 开发 ， 通 常 
将 GIS 服务 单独 部 署 ， 这 时 的 系统 架构 如 图 1.4 所 示 。 
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1.4 四 层 架 构 的 Web GIS 


在 上 述 系统 架构 中 ， 可 以 利用 现 有 的 GIS 服务 ， 例 如 Google、Microsoft、 百 度 、 高 德 的 
地 图 服务 ， 也 可 以 利用 商业 ArcGIS Server 或 开源 的 GeoServer 等 地 理 信息 服务 软件 ， 将 地 理 
信息 发 布 为 服务 ,， 在 系统 客户 端 利用 JavaScript 调用 这 些 服务 ， 从 而 在 系统 中 集成 地 图 及 GIS 
功能 。 
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正 因为 Web 服务 的 独立 性 以 及 Ajax 等 交互 技术 ，Web GIS 的 浏览 器 端 程序 可 以 访问 多 
个 Web 服务 资源 ， 而 不 仅仅 是 本 系统 拥有 者 所 开发 的 Web 服务 ,这 就 演化 为 如 图 1.5 所 示 的 
混搭 架构 。 


Web 资 源 1 


混 拱 Web 服 务 器 1 
EEEEI 


pl 


图 1.5 多 层 架 构 的 Web GIS 


混搭 技术 指 整合 网 络 上 多 个 资料 来 源 或 功能 ， 以 创造 新 服务 的 网 络 应 用 程序 。 该 词 源 自 
于 流行 音乐 将 两 种 不 同 风格 的 音乐 混合 ， 以 产生 新 的 趣味 的 作法 。 虽 然 在 古老 的 HTML 2.0 
版 本 中 早 有 这 个 概念 (将 图 片 提供 视 为 一 种 服务 ， 一 个 网 页 中 的 文字 与 图 片 可 以 来 自 不 同 的 
网 站 ， 一 个 图 文 并 茂 的 网 页 就 是 一 种 原始 的 混搭 》 ， 一 般 还 是 将 混搭 技术 视 为 Web 2.0 的 特 
性 之 一 。Web 技术 的 这 种 发 展 为 GIS 的 实施 提供 了 一 种 新 的 模式 。 一 个 用 户 可 以 从 一 个 服务 
器 获得 一 层 信息 ， 再 从 另 一 个 服务 中 获取 其 他 数据 或 专业 模型 ， 将 它们 融合 在 一 起 ， 进 而 产 
生 基 于 Web 的 新 的 GIS 应 用 模式 。 这 种 新 的 模式 将 极 大 地 拓展 GIS 的 应 用 范畴 和 服务 领域 。 


1.2.5 从 Web GIS 1.0 到 2.0 


早期 的 Web GIS 是 依据 当时 的 网 络 环境 提出 的 ， 近 年 来 由 于 Web 2.0 (主要 包括 Web 服 
务 、REST 与 AJAX 等 技术 ) 的 迅速 发 展 ， 原 本 Web GIS 中 所 依赖 的 方法 与 技术 也 不 断 在 更 
新 ， 表 1.1 显示 了 Web GIS 1.0 与 Web GIS 2.0 之 间 的 一 些 重要 区 别 。 
表 1.1 Web GIS 1.0 与 Web GIS 2.0 之 间 的 重要 区 别 

Web GIS 1.0 Web GIS 2.0 

静态 的 二 维 地 图 动态 的 二 维 全 球 性 地 图 ， 使 用 者 互动 性 高 (例如 Google 地 图 、 必 应 地 图 等 ) 

文件 传输 (FTP) 直接 使 用 网 络 服务 

地 理 数 据 交换 中 心 地 理 网 络 服务 目录 入 口 网 站 例如 Geodata.gov 等 ) 


独立 Web 站 点 网 络 服务 融入 技术 

使 用 者 端点 服务 远程 网 络 服务 API (例如 Google Map API、ArcGIS API for JavaScript、OpenLayer 等 ) 
数据 单方 向 给 予 使 用 者 参与 地 理 数 据 制作 (例如 Open Street Map) 

使 用 者 发 表意 见 困难 | 互动 机 制 提升 ， 使 用 者 之 间 交 流 增加 例如 Blog 等 ) 

私人 通信 协议 标准 的 通信 协议 (例如 OGC 标准 、SOAP、WSDL、REST 等 ) 


本 Web GIS 原理 与 应 用 开发 


Web GIS 1.0 主要 关注 的 是 静态 二 维 地 图 ，Web GIS 2.0 主要 关注 二 维 动态 地 图 和 对 三 维 
地 图 的 研究 (例如 Google 地 图 、Microsoft 必 应 地 图 和 ESRI ArcGIS Explorer) 。 这些 Web GIS 
2.0 新 增 的 技术 提升 了 用 户 体验 , 而 且 让 使 用 地 理 网 络 技术 的 用 户 拓展 了 一 个 数量 级 .Web GIS 
获取 地 理 信 息 的 方式 同时 也 发 生 了 转变 ， 从 使 用 FTP (文件 传输 协议 ) 来 传输 地 理 信息 方式 ， 
转变 为 直接 使 用 数据 流 的 Web 服务 和 一 组 API。 另 一 个 重要 变换 是 使 用 混搭 技术 。 


1.3 Web 服务 


上 一 节 中 简单 介绍 了 Web 服务 ， 由 于 Web 服务 是 当前 Web GIS 核心 内 容 ， 因 此 有 必要 
更 深入 地 详细 介绍 。 


1.3.1 Web 服务 的 重要 性 


1.3.1.1 从 数据 共享 的 角度 看 空间 信息 Web 服务 


空间 数据 共享 一 直 是 GIS 发 展 的 瓶颈 。 地 理 空 间 数据 是 研究 地 球形 成 演化 、 探 讨 人 类 生 
存 环境 、 减 轻 自 然 灾 害 、 合 理 开 发 资源 和 促进 社会 可 持续 发 展 的 重要 科学 依据 。 随 着 网 络 技 
术 及 Web GIS 的 飞速 发 展 和 应 用 , 更 加 迫切 要 求 社会 各 部 门 能 够 共享 地 理 空间 数据 以 及 与 之 
相关 的 资料 ， 实 现 地 理 空间 信息 的 全 球 共 享 。 地 理 空间 信息 共享 的 重要 性 主要 体现 在 : 


为 决策 全 球 化 问题 同时 提供 大 量 的 科学 地 理 数据 。 

地 理 信息 系 统 ( GIS ) 发 展 的 强烈 要 求 。 

为 使 用 空间 信息 的 社会 各 部 门 节省 大 量 的 人 才 、 时 间 和 金钱 。 
便于 实现 空间 信息 的 规范 化 和 标准 化 。 

可 以 加 强 空间 信息 的 高 效 管理 、 维 护 、 重 复 利用 和 有 效 增值 。 
为 数字 地 球 的 建设 商定 基础 。 


空间 信息 共享 是 指使 得 查询 、 浏 览 、 获 取 、 交 换 、 使 用 和 再 加 工地 球 上 与 人 类 生存 直接 
或 间接 相关 的 信息 能 够 做 到 方便 、 快 捷 、 准 确 、 安 全 和 全 面 ， 包 括 对 部 分 信息 处 理 资源 的 自 
由 使 用 。 空 间 信息 共享 强调 空间 数据 集 之 间 的 相互 透明 访问 和 信息 用 户 对 数据 集 的 透明 访问 
与 使 用 ， 注 重 从 空间 信息 的 语义 层次 、 数 据 模型 层次 和 数据 结构 层次 消除 空间 信息 描述 方法 
上 的 差异 性 以 及 表示 方法 上 的 差异 性 ， 对 空间 信息 给 出 统一 的 描述 和 表示 ， 达 到 空间 信息 本 
质 上 和 形式 上 的 共享 。 

空间 信息 共享 活动 涉及 了 3 个 主要 概念 : 空间 信息 资源 、 空 间 信息 的 获取 与 处 理 和 空间 
信息 应 用 。 而 这 样 也 就 出 现 了 3 种 不 同 的 角色 : 空间 信息 提供 者 、 空 间 信息 处 理 软件 和 提供 
者 一 一 就 是 通常 所 谓 的 GIS 以 及 用 户 。 

空间 信息 共享 要 解决 可 达 性 、 互 操作 性 和 易 用 性 。 
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可 达 性 是 指 用 户 能 存 取 到 数据 。 通 过 空间 信息 Web 服务 ， 用 户 可 以 通过 其 中 提供 的 数据 
服务 ， 来 查找 、 获 取 用 户 感 兴趣 的 数据 ， 这 种 数据 可 以 分 布 于 网 络 上 ， 并 由 不 同 的 服务 商 来 
提供 不 同 区 域 、 不 同 专题 、 不 同 质量 的 数据 。 

互 操作 性 是 指 在 不 同 的 GIS 之 间 能 互相 操作 、 对 数据 能 进行 相同 的 理解 。GIS 互 操作 的 
关键 就 是 解决 空间 信息 异 构 问 题 。 而 信息 具有 语法 和 语义 ， 可 以 分 层次 讨论 信息 异 构 问 题 。 
因此 在 互联 网 环境 中 的 空间 信息 共享 ， 通 过 空间 信息 Web 服务 ， 可 以 进行 语法 及 语义 差别 的 
消除 工作 。 在 消除 空间 信息 资源 的 语法 差异 方面 ， 通 过 Web Services 可 以 在 数据 的 请 求 者 与 
服务 者 之 间 用 统一 的 数据 格式 , 这 种 数据 格式 包括 GML 在 内 , 它们 已 逐渐 形成 标准 并 在 Web 
服务 中 使 用 。 在 消除 空间 信息 资源 的 语义 差异 方面 ， 语 义 Web 等 方面 的 进展 也 可 以 对 此 有 所 
帮助 。 

在 数据 共享 所 采用 的 技术 方面 ， 包 括 数据 格式 转换 ， 通 过 API 直接 读 取 ， 是 比较 低层 的 
方式 ; 基于 DBMS 的 集成 , 则 可 以 使 数据 更 统一 , 具有 一 定 的 互 操 作 性 ; 在 基于 Web Services 
进行 集成 的 系统 中 , 数据 有 统一 的 Schema 描述 ,数据 之 间 在 进行 接口 时 有 统一 的 协议 和 标准 ， 
可 以 有 效 地 实现 数据 的 共享 ， 如 图 1.6 所 示 。 
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1.3.1.2 ”从 软件 复 用 的 角度 看 空间 信息 Web 服务 


GIS 技术 经 过 长 期 的 发 展 ， 特 别 是 近年 来 的 长 足 进步 ， 已 经 积累 了 大 量 的 基础 软件 及 应 
用 软件 ， 这 些 软 件 的 功能 不 同 、 编 程 方法 不 同 、 编 程 接 口 不 同 且 用 户 界面 也 不 相同 。 在 新 的 
网 络 日 益 发 展 、 软 件 技术 飞速 进步 的 今天 ， 如 何 有 效 地 发 挥 这 些 软 件 的 功能 ， 充 分 利用 已 有 
的 软件 或 软件 构件 ， 来 实现 功能 更 强 的 软件 或 快速 实现 一 个 应 用 系统 ， 也 是 一 个 重要 问题 。 
存在 大 量 的 可 复 用 构件 是 有 效 复 用 的 基本 前 提 ， 而 有 效 地 管理 大 量 构件 ， 提 供 方便 的 构件 存 
储 、 构 件 检索 和 构件 提取 等 功能 ， 则 是 成 功 复 用 的 必要 保证 。Web 服务 系统 则 为 这 种 复 用 和 
管理 提供 了 一 种 技术 支持 。 

首先 ， 将 现 有 的 GIS 系统 中 的 功能 改造 成 Web 服务 是 可 行 的 。 由 于 Web 服务 采用 的 技 
术 基 础 是 XML， 它 是 一 种 规范 化 的 文本 ， 易 于 被 各 种 编程 语言 进行 处 理 ， 这 使 得 可 以 利用 现 
有 的 GIS 系统 中 的 功能 进行 分 解 、 重 组 、 规 范 化 ， 从 而 提供 Web 服务 接口 是 可 以 实施 的 。 
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其 次 ， 在 Web 服务 中 的 对 象 实际 是 网 络 上 分 布 的 对 象 。 这 些 对 象 不 论 其 内 部 如 何 实现 ， 
但 在 这 些 对 象 之 间 是 靠 通用 的 接口 来 进行 通信 的 ， 这 些 接口 遵守 各 种 层次 的 协议 ， 如 XML、 
SOAP、WSDL 等 。 对 于 空间 信息 Web 服务 中 的 服务 ， 还 有 与 空间 信息 处 理 相 关 的 协议 ， 如 
WFS (Web Feature Service， 网 络 要 素 服务 ) 、WCS (Web Coverage Service， 网 络 地 理 覆 盖 
服务 ) 等 。 一 个 系统 可 以 方便 地 调用 远程 对 象 ， 而 不 论 这 种 对 象 是 在 哪 种 平台 上 ， 也 不 论 这 
种 对 象 是 用 什么 编程 技术 来 实现 的 ， 这 样 就 通过 Web 服务 的 对 象 复 用 实现 了 更 高 层次 的 对 象 
复 用 。 

另外 ，Web 服务 是 服务 的 松散 集合 ， 可 以 方便 地 发 布 ， 并 可 以 通过 程序 自动 或 人 工地 进 
行 查找 和 调用 ， 这 就 给 利用 已 有 的 Web 服务 带 来 了 方便 。 例 如 ， 可 以 将 现 有 的 多 个 不 同 供应 
商 提供 的 地 图 显示 服务 集合 起 来 ， 再 形成 一 个 新 的 、 面 向 专题 的 地 图 服务 。 


1.3.1.3 ”从 系统 集成 的 角度 看 空间 信息 Web 服务 


在 一 定 意义 上 Web 服务 技术 是 一 种 系统 集成 的 技术 。Web 服务 用 于 GIS 是 一 种 更 好 的 
进行 GIS 系统 集成 的 技术 。 
GIS 系统 的 集成 技术 经 历 了 以 下 的 发 展 过 程 。 


1， 基 于 对 象 技 术 的 RPC 方法 


多 年 以 来 ， 应 用 程序 分 布 式 集成 计算 方法 的 演化 基本 上 都 是 基于 远 端 过 程 调 用 (RPC， 
Remote Procedure Call) 机制 。 RPC 是 指 应 用 程序 对 运行 在 远 端 计算 机 上 的 代码 进行 功能 调用 。 
为 实现 该 调用 的 请 求 ， 在 相互 协作 的 计算 机 之 间 ， 需 要 使 用 特定 的 协议 支持 来 对 信息 数据 进 
行 打包 、 发 送 和 接收 。 

目前 基本 上 每 种 主要 的 对 象 技术 均 有 其 自己 的 RPC 技术 。Microsoft 组 件 对 象 模型 
(COM) 使 用 DCOM/COM+，CORBA 使 用 IIOP，Java 使 用 RMI。 这 种 以 “分 布 式 对 象 ” 
为 标志 的 集成 分 布 式 系统 ， 在 应 用 于 集成 更 广泛 的 分 布 式 系 统 时 具有 很 大 的 不 足 。 由 于 这 些 
应 用 程序 接口 需要 “严格 匹配 ”， 并 与 目标 系统 的 专用 技术 密切 相关 ， 所 以 其 连接 非常 脆弱 ， 
很 难 实现 真正 的 跨 平 台 、 异 构 系 统 的 集成 。 由 于 这 些 相互 关联 的 组 件 可 能 各 不 相同 ， 所 以 开 
发 和 维护 的 费用 非常 高 。 由 于 在 等 待 远 端 所 访问 资源 的 响应 时 ， 对 组 件 进行 的 同步 调用 经 常 
“阻塞 ”， 所 以 其 可 扩展 性 也 存在 固有 的 缺陷 。 


2.， 基 于 消息 中 间 件 技术 的 RPC 方法 


基于 消息 的 中 间 件 技术 引入 了 关联 的 方法 ， 以 便 使 用 消息 传送 技术 集成 更 大 地 域 范围 中 
的 分 布 式 系统 ， 改 进 了 对 象 集成 技术 的 可 扩展 性 和 可 管理 性 。 由 于 这 样 通常 不 会 阻塞 应 用 程 
序 的 调用 ， 应 用 程序 可 以 “发 送 并 忘记 ”信息 ， 从 而 使 操作 更 有 弹性 和 可 扩展 性 。Microsoft、 
IBM、BEA 等 公司 都 提供 消息 队列 与 事务 处 理 中 间 件 产品 ， 支 持 分 布 式 应 用 系统 的 集成 。 

基于 “消息 中 间 件 ”的 集成 技术 的 一 个 主要 限制 就 是 它 的 开放 性 。 首 先 ， 即 使 系统 最 初 
可 以 接受 开放 数据 格式 ， 它 们 仍然 基于 专用 程序 很 高 的 技术 ， 并 使 用 专用 的 接口 和 专用 的 内 
部 数据 表示 方法 ; 其 次 ， 购 买 这 些 技术 、 集 成 和 后 续 维护 昂贵 ， 且 这 些 技术 通常 需要 在 应 用 
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程序 连接 的 两 端 同 时 运行 特定 的 软件 或 各 有 一 份 客 户 许可 协议 ， 这 样 增加 了 成 本 、 消 耗 时 间 
并 增加 了 集成 的 复杂 性 ， 集 成 的 范围 也 受到 限制 。 因 此 需要 一 种 开放 的 系统 集成 技术 ， 使 用 
符合 工业 标准 的 传输 协议 、 过 程 调用 和 数据 表示 方法 ， 以 支持 平台 分 布 式 系统 的 低 成 本 集成 
与 互 操作 。 

3. SOAP 风格 的 Web 服务 方法 


早期 Web 服务 方法 起 源 于 XML-RPC 技术 。 在 1998 年 ，Userland、DevelopMentor 与 
Microsoft 一 起 发 布 了 XML-RPC (http://www.xmlrpc.com ) 。XML-RPC 提供 了 一 种 简单 的 机 
制 , 使 处 于 不 同 环境 下 的 应 用 之 间 ， 可 以 通过 互联 网 来 进行 远程 过 程 调用 。 它 采用 XML 作为 
编码 标准 , HTTP 为 传输 协议 .XML-RPC 通过 HTTP 请 求 向 RPC 服务 器 提交 请 求 , 通过 HTTP 
响应 Response 获得 RPC 的 调用 结果 。 这 种 XML-RPC 技术 突出 地 强调 了 XML 和 HTTP 的 作 
用 ， 使 用 应 用 的 集成 可 以 跨 平台 地 进行 。 后 来 ，IBM、Microsoft、SAP 等 公司 共同 在 此 基础 
上 逐步 提出 了 Web Services 的 概念 ， 并 制定 了 一 系列 服务 调用 、 发 布 、 集 成 的 协议 ， 使 Web 
Services 成 为 新 一 代 的 系统 集成 方法 。 

SOAP 风格 的 Web 服务 将 应 用 逻辑 封装 起 来 ， 对 于 用 户 只 提供 标准 接口 。 对 于 客户 端 ， 
服务 器 上 的 数据 和 应 用 轴 辑 是 透明 的 ， 因 此 它 能 够 灵活 组 织 网 络 资源 ， 较 好 地 解决 地 图 的 共 
享 问题 。 但 是 基于 SOAP 的 Web 服务 依赖 于 定制 ， 每 个 SOAP 消息 使 用 独特 的 命名 资源 的 
方法 ， 每 个 SOAP 应 用 需要 定义 自己 的 接口 ，SOAP 的 这 些 特点 对 于 服务 间 的 互 操作 的 实现 
十 分 不 利 ; 另外 ，SOAP 协议 栈 并 不 是 专门 为 GIS 而 设计 , 没有 考虑 GIS 数据 具有 空间 参考 、 
海量 存储 等 特点 ， 除 了 简单 、 小 规模 的 GIS 应 用 ，SOAP 协议 栈 很 难 不 加 改动 地 应 用 在 地 理 
信息 服务 领域 。 


4. REST 风格 的 Web 服务 方法 


REST 为 解决 上 述 问题 提供 了 新 的 契机 ， 它 以 更 贴近 WWW 基础 协议 的 方式 来 实现 Web 
服务 ,大 大 简化 了 Web 服务 的 设计 与 调用 。 因 此 当前 更 流行 的 是 基于 REST 风格 的 Web 服务 。 

空间 信息 Web 服务 就 是 将 这 种 新 的 技术 应 用 于 地 理 信 息 系统 ,解决 地 理 信息 系统 中 的 多 
源 、 异 构 、 分 布 系统 的 集成 问题 。 


1.3.2 REST 及 REST 风格 的 Web 服务 


因为 REST 风格 的 Web 服务 与 复杂 的 SOAP 和 XML-RPC 相 比 而 言明 显 更 加 简洁 ， 越 来 
越 多 的 Web 服务 开始 采用 REST 风格 设计 和 实现 。 例 如 , Amazon.com 提供 REST 风格 的 Web 
服务 进行 图 书 查 找 ， 雅虎 提供 的 Web 服务 也 是 REST 风格 的 ， 国 内 百度 地 图 、 高 德 地 图 提供 
的 地 图 服务 也 是 REST 风格 的 。 REST 对 于 资源 型 服务 接口 来 说 很 合适 , 同时 特别 适合 对 于 效 
率 要 求 很 高 、 而 安全 要 求 不 高 的 场景 。 本 书后 面 内 容 中 发 布 与 使 用 的 也 是 REST 风格 的 Web 
服务 ， 因 此 这 里 再 详细 介绍 其 特点 。 


本 Web GIS 原理 与 应 用 开发 


1.3.2.1 REST 


单纯 就 REST 术语 的 出 现 而 言 ， 它 是 由 Roy Fielding 在 2000 年 的 论文 中 首次 提出 的 一 种 
软件 架构 。 

REST 基础 概念 包括 : 

(1) 在 REST 中 的 一 切 都 被 认为 是 一 种 资源 。 每 个 资源 由 URI 标识 。 

(2) 对 资源 的 操作 包括 获取 、 创 建 、 修 改 和 删除 资源 ， 这 些 操作 正好 对 应 HTTP 协议 提 
供 的 GET、POST、PUT 和 DELETE 方法 。 也 就 是 说 使 用 统一 的 接口 ， 而 不 像 SOAP 风格 的 
服务 那样 ， 每 个 服务 的 名 称 都 是 不 同 的 。 

(3) 无 状态 。 每 个 请 求 是 一 个 独立 的 请 求 。 从 客户 端 到 服务 器 的 每 个 请 求 都 必须 包含 所 
有 必要 的 信息 ， 以 便于 理解 。 

(4) 资源 的 表现 形式 则 是 JSON (JavaScript Object Notation) 、XML 或 者 HTML， 取 决 
于 读者 是 机 器 还 是 人 ， 是 消费 Web 服务 的 客户 软件 还 是 Web 浏览 器 。 当 然 也 可 以 是 任何 其 


他 的 格式 。 
REST 架构 风格 最 重要 的 约束 有 如 下 6 个 方面 : 
。 客户 /服务 器 
通信 只 能 由 客户 端 单 方面 发 起 ， 表 现 为 请 求 /响应 的 形式 。 
。 无 状态 
通信 的 会 话 状态 应 该 全 部 由 客户 端 负 责 维 护 。 
。 缓存 
响应 内 容 可 以 在 通信 链 的 某 处 被 缓存 ， 以 改善 网 络 效率 。 
e 统一 接口 


在 通信 链 的 组 件 之 间 通 过 统一 的 接口 相互 通信 ， 以 提高 交互 的 可 见 性 。 
。 分 层 系统 


通过 限制 组 件 的 行为 〈《 即 每 个 组 件 只 能 “看 到 ”与 其 交互 的 紧邻 层 ) ， 将 架构 分 解 为 若 
干 等 级 的 层 。 


。 按 需 代码 (可 选 ) 


支持 通过 下 载 并 执行 一 些 代码 (例如 Java Applet、Flash 或 JavaScript) ， 对 客户 端的 功 
能 进行 扩展 。 
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REST 风格 的 Web 服务 (也 称 为 REST 风格 的 Web API) 是 一 个 使 用 HTTP 并 遵循 REST 


原则 的 Web 服务 。 它 从 以 下 3 个 方面 资源 进行 定义 : 
。 URI， 比 如 : http://example.com/resources/。 


。 Web 服务 接受 与 返回 的 互联 网 媒体 类 型 ， 比 如 : JSON、XML、YAML 等 。 
。 Web 服务 在 该 资源 上 所 支持 的 一 系列 请 求 方法 (例如 POST、GET、 PUT 或 DELETE )。 


表 1.2 列 出 了 在 实现 REST 风格 Web 服务 时 HTTP 请 求 方法 的 典型 用 途 。 
表 1.2 HTTP 请 求 方法 在 REST 风格 Web 服务 中 的 典型 应 用 


资源 


等 ) 


1.3.3 ”查看 在 线 的 Web 服务 


那么 如 何 访问 这 些 REST 风格 的 空间 信息 Web 服务 呢 ? 


(1) 构建 请 求 URL。 
URL 由 服务 的 端点 加 参数 构成 。 


POST DELETE 
一 组 资源 的 URI， 比 如 : 列 出 URI， 以 及 该 资 | 使 用 给 定 的 一 组 | 在 本 组 资源 中 创建 / | 删除 整 组 
http://example.com/resource | 源 组 中 每 个 资源 的 详 | 资源 替换 当前 整 
s/ 细 信 息 ( 后 者 可 选 ) ”| 组 资源 


追加 一 个 新 的 资源 。| 资源 
该 操作 往往 返回 新 
资源 的 URL 

把 指定 的 资源 当 作 ”| 删除 指定 
一 个 资源 组 , 并 在 其 | 的 元 素 
下 创建 /追加 一 个 新 
的 元 素 , 使 其 隶属 于 
当前 资源 


单个 资源 的 URI， 比 如 : 获取 指定 资源 的 详细 | 蔡 换 /创建 指定 

http://example.com/ 信息 ， 可 以 自选 一 个 | 的 资源 。 并 将 其 

resources/142 合适 的 网 络 媒 体 类 型 | 追加 到 相应 的 资 
(比如 XML、JSON | 源 组 中 


- 般 包括 以 下 4 个 步骤 。 


首先 确定 端点 。 每 个 GIS 服务 都 有 一 个 端点 ,例如 一 个 典型 的 WMS (Web Map Services， 


网 络 地 图 服务 ) 地 图 服务 的 端点 为 : 


http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/nOr.cgi?SERVICE=WMS 
然后 确定 操作 。 不 同 GIS Web 服务 支持 不 同 的 操作 。 不 同 的 操作 会 返回 不 同 的 结果 。 地 
图 服务 可 以 输出 地 图 、 识 别 某 要 素 。 输 出 地 图 可 以 生成 地 图 ， 同 时 识别 出 地 图 服务 层 的 属性 


表 。 例 如 WMS 提供 GetMap 操作 ， 返 回 指定 范围 的 地 图 图 片 。 


接着 确定 参数 。 不 同 的 操作 需要 不 同 的 参数 。 例 如 ， 如 果 请 求 地 图 图 片 ， 需 要 提供 地 图 


范围 的 四 周 角 点 坐标 参数 ， 也 就 是 地 图 覆盖 范围 。 
最 后 确定 输出 格式 。 
例如 一 个 访问 美国 雷达 地 图 的 URL 格式 为 : 


http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/nOr.cgi?SERVICE=WMS&REQUEST=G 
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etMap&FORMAT=image/png&TRANSPARENT=TRUE&STYLES=&VERSION=1.3.0&LAYER 
S=nexrad-nOr& WIDTH=877&HEIGHT=276&CRS=EPSG:900913&BBOX=-15252263.28954773, 
2902486.4758432545,-6671748.242369267,5602853.811101243 

(2) 提交 URL 请 求 到 服务 器 。 可 以 不 通过 编程 发 送 URL 请 求 。 例如， 只 需要 在 网 页 浏 
览 器 的 地 址 栏 中 输入 网 址 。 每 种 编程 语言 都 有 不 同 的 提出 请 求 方式 。 

(3) 服务 器 处 理 请 求 ， 并 运行 Web 服务 代码 ， 然 后 将 结果 返回 到 客户 端 。 该 结果 通常 
是 一 张 图 片 或 包含 信息 的 字符 串 。 

(4) 解析 和 使 用 响应 。 

并 不 是 所 有 的 请 求 都 调用 Web 服务 代码 ， 一 些 Web 请 求 内 容 仅仅 返回 一 个 文件 。 而 这 
就 是 切片 地 图 工作 原理 ， 也 就 是 切片 地 图 服务 快 的 原因 。 在 后 面 的 内 容 中 将 更 详细 介绍 切片 
地 图 。 现 在 来 观察 一 个 指定 缩放 级 别 、 行 与 列 的 切片 的 请 求 : 

http://a.tile.openstreetmap.org/15/11068/19742.png 

该 请 求 下 钻 到 服务 器 的 文件 结构 中 ,并 将 请 求 的 PNG 图 片 作 为 响应 返回 给 客户 端 。 在 服 
务 器 端 除了 检索 文件 之 外 ， 并 没有 运行 代码 ， 因 此 也 可 以 说 并 没有 调用 Web 服务 。 但 是 ， 这 
类 简单 的 Web 请 求 同 样 是 许多 Web GIS 的 重要 组 成 部 分 。 

并 不 是 所 有 的 Web 服务 都 是 用 同样 格式 的 URL 与 参数 。 本 书 介 绍 了 Web 服务 最 常用 的 
格式 ， 特 别 是 那些 开放 标准 与 开源 软件 的 Web 服务 。 

虽然 我 们 在 访问 Google 地 图 、 必 应 地 图 以 及 百度 地 图 等 网 站 时 ， 并 不 需要 使 用 上 述 复杂 
URL， 但 是 浏览 器 确实 是 在 发 送 成 百 上 千 这 样 的 请 求 到 服务 器 上 。 下 面 通 过 Firebug 这 一 
Mozilla Firefox 浏览 器 的 插件 ， 介 绍 查看 浏览 器 在 后 台 如 何 发 送 这 些 请 求 的 方法 。 

(1) 单 击 Firefox 浏览 器 上 的 “工具 ”选项 ， 然 后 单 击 “ 附 加 软件 ”， 在 弹出 的 小 窗口 
中 ， 单 击 右 下 角 的 “获取 扩展 ”选项 ， 在 打开 的 页 面 中 搜索 Firebug， 最 后 在 搜索 结果 的 页 面 
中 下 载 Firebug 并 安装 。 

(2) 重新 启动 Firefox 浏览 器 ， 打 开 网 址 为 http://map.baidu.com/ 的 百度 地 图 网 站 。 

(3) 单 击 状态 栏 中 最 右 方 的 灰色 昆虫 按钮 ( 富 )， 或 使 用 快捷 键 F12 启用 Firebug 插件 ， 
它 会 将 当前 页 面 分 成 上 下 两 个 框架 ， 并 且 此 时 灰色 按钮 变 成 红色 ( 屋 )。 如 果 有 两 个 显示 器 ， 
最 好 使 用 快捷 键 Ctrl+F12， 在 另 一 个 窗口 打开 Firebug。 

(4) 在 Firebug 窗口 中 ,切换 到 “网 络 ” 面 板 。 如 果 是 第 一 次 使 用 ， 则 需要 使 用 “网 络 ” 
标签 旁 的 下 拉 箭 头 启用 监视 网 络 功能 。 

(5) 在 百度 地 图 窗口 中 进行 漫游 、 放 大 缩小 等 操作 。 

(6) 这 时 在 “网 络 ” 面 板 中 会 显示 发 送 的 许多 Web 请 求 ， 大 部 分 是 请 求 地 图 切片 。 将 
鼠标 悬 停 到 某 个 请 求 上 ， 如 果 请 求 返回 的 不 是 图 片 ， 则 会 显示 完整 的 URL， 和 否则 还 会 显示 响 
应 图 片 的 缩 略图 ， 如 图 1.7 所 示 。 

(7) 展开 请 求 ， 可 以 查看 请 求 更 为 详细 的 细节 ， 包 括 发 送 的 参数 、 头 信息 、 响 应 以 及 缓 
存 等 。 
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Firebug 是 Mozilla Firefox 浏览 器 的 开源 扩展 ,提供 了 很 多 工具 , 可 以 监视 、 编辑 和 调试 
任何 Web 站 点 的 级 联 样 式 表 (CSS) 、HTML、 文 档 对 象 模型 (DOM) 和 JavaScript。Firebug 
包括 一 个 JavaScript 控制 台 、 一 个 日 志 记 录 API 以 及 一 有 用 的 网 络 监 视 器 。 利 用 Firebug 可 
从 各 个 不 同 的 角度 剖析 Web 页 面 内 部 的 细节 层面 ， 可 以 很 轻松 地 调试 和 优化 Web 和 Ajax 应 
用 程序 ， 给 Web 开发 者 带 来 很 大 的 便利 。 

其 他 最 新 的 浏览 器 一 般 也 都 包含 类 似 的 “开发 人 员工 具 ” (Internet Explorer) 、“ 开 发 
者 工具 ” (Google Chrome) 菜单 。 


1.3.4 ”OGC 的 Web 服务 规范 
在 GIS 分布 式 、 互 操作 方面 ， 一 些 组 织 ( 如 OGC，UCGIS 等 ) 正在 制定 相应 标准 和 进 


行 一 些 实验 项 目 ， 其 中 OGC 在 空间 信息 Web 服务 方面 制定 了 一 系列 规范 ， 统 称 为 OWS。 
在 OWS 服务 体系 中 ， 主 要 包括 如 下 6 个 部 分 ， 如 图 1.8 所 示 。 


有 Bind 


~” Encodings 


1.8 OWS 的 组 成 
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(1) 地 理 数 据 服务 (Data Service) 。 

提供 对 空间 数据 的 服务 ， 主 要 有 WFS、WCS。 地 理 数据 服务 返回 的 结果 通常 是 带 有 空间 
参照 系 的 数据 。 

(2) 描绘 服务 (Portrayal Service) 。 

提供 对 地 理 空间 信息 进行 可 视 化 的 能 力 。 给 定 一 个 或 多 个 输入 ， 描 绘 服务 会 产生 演 染 后 
的 输出 ， 例 如 地 图 的 制图 描绘 、 地 形 的 透视 图 、 影 像 的 注解 图 、 特 征地 物 在 时 间 和 空间 上 的 
动态 改变 等 ， 主 要 有 WMS。 

(3) 处 理 服务 (Processing Service) 。 

提供 对 地 理 空间 数据 进行 操作 的 服务 和 增值 服务 , 主要 有 WPS (Web Processing Service， 
网 络 处 理 服 务 ) 、Geocoder (地 理 编码 服务 ) 、Gazetteer (地 名 辞典 服务 ) 、Coordinate Transfer 
Service〔 坐 标 转换 服务 ) 等 。 

(4) 目录 服务 (Catalog Services) 。 

提供 对 各 种 服务 、 数 据 及 相关 资源 的 描述 信息 〈 即 元 数据 ) 集合 的 发 布 与 查询 ， 包 括 服 
务 目录 、 样 式 目 录 、 数 据 目录 、 设 备 目录 以 及 其 他 类 型 的 目录 。 

(5) 编码 (Encodings) 。 

所 有 OGC 框架 的 编码 规范 都 采用 XML Schema 来 定义 。 这 些 编码 描述 了 特定 的 词汇 表 ， 
用 于 在 应 用 客户 和 服务 之 间 、 服 务 与 服务 之 间 封 装 成 消息 的 数据 传输 。OGC 的 规范 定义 或 计 
划 定义 的 编码 主要 包括 GML(Geography Markup Language, 地 理 置 标语 言 )、SLD(Styled Layer 
Descriptor， 样 式 化 图 层 描述 符 ) 以 及 Service Metadata 〈 服 务 元 数据 ) 等 。 

(6) 客户 端 应 用 (Client Application) 。 

即 客户 端的 基本 应 用 ， 如 地 图 的 显示 、 地 图 浏览 以 及 其 他 一 些 增值 服务 。 


1.4 自由 及 开源 软件 、 开 放 规 范 与 开放 数据 


当前 商业 GIS 软件 的 使 用 和 维护 费用 越 来 越 高 ， 例 如 包含 客户 端 与 服务 器 端 一 整套 的 
ESRI ArcGIS 软件 售 价 约 为 70 万 元 人 民 币 。 而 且 其 销售 策略 是 ， 若 购买 了 服务 器 端 软件 则 必 
须 购买 客户 端 软件 ， 其 理由 是 用 户 既 然 使 用 了 其 服务 器 端 软 件 来 发 布 服务 ， 那 必然 就 需要 使 
用 其 客户 端 软 件 来 处 理 数据 。 这 对 一 些 比较 小 的 Web GIS 应 用 来 说 ， 远 远 超出 了 其 可 承受 的 
范围 。 并 且 众多 商业 软件 GIS 的 数据 和 操作 并 非 完全 能 够 转换 和 共享 ， 造 成 一 些 信息 孤岛 。 
不 过 在 商业 GIS 软件 的 对 面 活跃 着 开源 GIS。OGC 成 立 于 1994 年 ， 致 力 于 研究 和 建立 开放 
地 理 数据 交互 操作 标准 ， 使 用 户 和 开发 者 能 进行 互 操 作 。 国 际 地 理 空间 开发 基金 会 (Open 
Source Geospatial Foundation ) 成 立 于 2006 年 2 月 , 其 使 命 是 支持 开源 地 理 信息 软件 和 遥感 软 
件 的 开发 及 推动 其 更 广泛 的 应 用 ， 并 对 其 支持 的 项 目 提供 组 织 、 法 律 和 财政 上 的 帮助 ， 促 进 
OSGeo 基金 会 基于 地 理 信 息 开发 标准 软件 及 其 互 操作 技术 的 开发 、 推 广 和 普及 。OSGeo 中 国 
中 心 于 2006 年 9 月 成 立 ， 帮 助 中 国 地 区 的 用 户 和 开发 者 更 好 地 使 用 OSGeo 基金 会 提供 的 源 
代码 、 产 品 和 服务 。 
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1.4.1 自由 及 开源 GIS 软件 


自由 及 开源 软件 是 一 种 可 以 归 类 为 既是 自由 软件 又 是 开源 软件 的 计算 机 软件 。 也 就 是 说 ， 
任何 人 被 授权 后 都 可 以 自由 地 使 用 、 复 制 、 研 究 和 以 任何 方式 来 改动 软件 ， 并 且 其 源 代码 是 
开放 和 共享 的 ， 因 此 人 们 被 鼓励 志愿 地 改善 软件 的 设计 。 这 种 软件 是 相对 于 商业 软件 而 言 ， 
而 后 者 是 在 版 权 的 严格 限制 之 下 ， 并 且 通 常 其 源 代码 对 于 用 户 是 不 开放 的 。 

当前 存在 许多 包含 了 各 种 层次 的 自由 及 开源 的 GIS 软件 ， 例 如 大 型 的 桌面 GIS 有 QGIS 
和 GRASS GIS 等 , 目前 比较 流行 的 服务 器 端 软件 有 Geoserver、MapServer 和 QGIS Server 等 ， 
还 有 开源 的 GIS 数据 库 项 目 如 PostGIS/PostgreSQL Spatial Database， 另 外 还 有 一 些 数据 转换 
工具 (如 OGR 和 GDAL) 以 及 地 图 投影 算法 库 〈 如 Proj4 和 Geotrans) 等 开源 项 目 。 这 些 软 
件 大 多 都 得 到 OSGeo 的 支持 。 

GRASS 是 大 型 的 GIS 系统 , 最 早 由 美国 军 方 建筑 工程 研究 实验 室 构 建 维护 , 后 来 贡献 给 
开源 社区 ,目前 GRASS 已 经 覆盖 大 多 数 GIS 系统 的 操作 函数 ,有 超过 300 个 经 典 算法 ,GRASS 
就 是 一 个 开源 版 本 的 ArcGIS。QGIS 是 一 个 用 户 界 面 友好 的 桌面 GIS 系统 ， 使 用 基于 QT 的 
图 形 库 实 现 ， 大 名 易 晶 的 KDE 图 形 和 Google Earth 也 是 基于 QT 构建 。 而 且 QGIS 可 以 很 好 
地 支持 GRASS 的 算法 接口 ， 成 为 了 GRASS 的 一 个 重要 的 前 端 表现 工具 ，QGIS 就 是 一 个 简 
化 版 本 的 GRASS。GRASS 和 QGIS 都 是 跨 平 台 的 桌面 GIS 软件 ， 可 以 运行 在 很 多 操作 系统 

上 。 本 书 将 介绍 在 将 数据 发 布 为 Web 服务 之 前 如 何 使 用 QGIS 浏览 并 操作 数据 。 

MapServer 底 层 采 用 C 语言 来 编写 ,基于 CGI 脚本 实现 , 页 面 调 用 支持 PHP、JSP、JavaScript 
等 多 种 语言 , 并 对 OGC 的 WMS 和 WFS 提供 支持 。GeoServer 基于 Java 和 GeoTools 库 开 发 ， 
它 的 功能 全 面 遵循 OGC 开放 标准 ，GeoServer 对 发 布 WFS-T 和 WMS 提供 便捷 的 支持 ， 并 以 
XML 文件 描述 所 有 地 图 服务 。 本 书 将 介绍 如 何 用 GeoServer 来 发 布 空间 信息 Web 服务 。 

PostgreSQL 是 一 个 开源 的 基于 对 象 的 数据 ，PostGIS 则 是 为 PostgreSQL 提供 空间 支持 ， 
类 似 ArcGIS 的 空间 数据 引擎 ArcSDE。 本 书 也 会 介绍 如 何 使 用 PostGIS 来 存储 空间 数据 。 

对 于 需要 使 用 API 将 地 图 图 层 组 合 起 来 并 显示 在 网 页 中 , 其 中 最 为 成 熟 的 是 OpenLayers。 
OpenLayers 是 一 个 用 户 开发 Web GIS 客户 端的 JavaScript 包 ， 实 现 访问 地 理 空 间 数据 的 方法 
都 符合 行业 标准 ， 采 用 面向 对 象 方式 开发 ， 并 使 用 来 自 Prototypejs 和 Rico 中 的 一 些 组 件 。 本 
书 将 会 介绍 如 何 使 用 OpenLayer 来 访问 空间 信息 Web 服务 。 其 他 对 应 的 FOSS API 包括 
Leaflet、ModestMaps、D3 以 及 Polymaps 等 。 


1.4.2 ”开放 规范 的 使 用 


这 里 要 介绍 的 是 两 类 开放 规范 。 

(1) 开放 数据 格式 。 

如 果菜 数据 格式 有 完备 的 描述 文档 ， 对 于 各 种 GIS 软件 都 能 读 写 ， 并 且 格 式 的 发 明 者 没 
有 宣称 任何 版 税 的 权利 ， 那 么 该 数据 格式 就 是 开放 的 。 

文本 格式 的 开放 数据 格式 包括 KML (Keyhole Markup Language，Keyhole 标记 语言 ) 、 
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GeoJSON 与 TopoJSON 等 ，JPEG 与 PNG 是 栅 格 中 开放 的 数据 格式 。ESRI Shapefile (shp) 
简称 为 Shapefile， 是 美国 环境 系统 研究 所 公司 (ESRI) 开发 的 一 种 空间 数据 开放 格式 。 目 前 ， 
该 文件 格式 已 经 成 为 了 地 理 信 息 软 件 界 的 一 个 开放 标准 , 这 表明 ESRI 公司 在 全 球 的 地 理 信息 
系统 市 场 的 重要 性 。Shapefile 也 是 一 种 重要 的 交换 格式 , 它 能 够 在 ESRI 与 其 他 公司 的 产品 之 
间 进 行 数据 互 操作 。 与 此 相反 的 是 ESRI 的 文件 地 理 数据 库 〈File Geodatabase) ， 该 格式 是 封 
闭 的 ， 除 了 ESRI 的 工具 之 外 ， 其 他 软件 不 能 打开 与 创建 。 

(2) 开放 规范 。 

GIS 界 最 主要 的 开放 规范 就 是 OGC 制定 的 一 系列 规范 (已 经 在 “1.3.4 OGC 的 Web 服务 
规范 ”中 进行 了 介绍 ) 。 国 际 标准 化 组 织 〈ISO) 技术 委员 会 211 (TC211) 也 是 最 主要 的 空 
间 信 息 标准 组 织 之 一 。 目 前 ISO/TC 211 已 经 完成 或 正在 制定 的 地 理 信 息 国 际 标准 约 有 40 余 
项 ， 包 括 《地 理 信 息 参 考 模型 》《 地 理 信 息 概念 模式 语言 》 与 《地 理 信息 术语 》 等 。 

此 外 ,ESRI 与 多 个 其 他 组 织 合作 进行 开发 , 正在 推动 开放 式 GeoServices REST 规范 的 使 
用 。 此 规范 为 Web 客户 端 利 用 REST 技术 与 GIS 服务 器 进行 通信 提供 了 标准 方法 。 通 过 
ArcGIS for Server 发 布 的 Web 服务 遵守 此 规范 。 这 意味 着 非 ESRI 的 开发 者 可 以 自由 地 创建 应 
用 来 发 布 与 访问 符合 该 标准 的 Web 服务 。 虽 然 GeoServices REST 并 没有 得 到 OGC 的 采纳 ， 
但 这 是 一 个 商业 软件 自愿 公开 规范 的 典型 例子 。 


1.4.3 ”开放 数据 的 作用 


开放 数据 是 一 类 可 以 被 任何 人 免费 使 用 、 再 利用 、 再 分 发 的 数据 。 在 其 限制 上 ， 最 多 是 
要 求 署 名 和 使 用 类 似 的 协议 再 分 发 。 
Data.gov 中 包含 了 许多 由 美国 


政府 收集 的 开放 数据 。 此 外 ， 开 放 | To 
街道 地 图 (OpenStreetMap ， 缩 写 a 2 Ee ED 


本 
OSM) 也 是 一 个 广泛 使 用 的 开放 数 。 > | 
据 源 ， 如 图 1.9 所 示 。OSM 项 目 由 DR 本 i i "es 
英国 人 Steve Coast 创立 ， 概 念 启发 量 下 | 3 ai 
自 维基 百科 网 站 ， 是 一 个 构建 自由 时 NN | u 8 


内 容 之 网 上 地 图 协作 计划 ， 目 标 是 
创造 一 个 内 容 自由 且 能 让 所 有 人 编 
辑 的 世界 地 图 ， 并 且 让 廉价 的 移动 
设备 有 方便 的 导航 方案 。 本 书 将 在 
后 面 的 内 容 介 绍 如 何 从 中 获取 数 
据 。 


图 1.9 北京 西 站 附近 开放 街道 地 图 数据 
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1.5 ”实践 1: QGIS 的 安装 与 基本 使 用 


在 将 数据 发 布 为 Web 服务 之 前 ， 需 要 进行 收集 数据 、 格 式 转换 、 数 据 编辑 、 样 式 设置 等 
这 些 大 量 的 数据 准备 工作 ， 这 些 准 备 工 作 是 创建 Web GIS 的 一 部 分 。 这 些 工 作 需 要 使 用 客户 
端 软 件 ， 本 书 介 绍 使 用 的 是 QGIS 这 一 FOSS 软件 。 
在 该 实践 中 ， 将 介绍 如 何 安装 QGIS 及 其 矢量 数据 的 处 理 操作 。 
(1) 下 载 Shapefile 数据 。 
请 从 前 言 中 给 出 的 下 载 地 址 下 载 本 书 提供 的 资源 。 这 里 所 使 用 的 数据 位 于 “Data\Ottawa” 
目录 中 ， 是 加 拿 大 安大略 省 源太 华 市 的 数据 。 
(2) 下 载 QGIS 安装 程序 。 
读者 可 以 访问 QGIS 官方 网 站 (www.qgis.org) ， 在 其 主页 单 击 “Download Now” 按 钮 ， 
进入 下 载 页 面 。 对 于 Windows 操作 系统 的 用 户 ， 可 根据 操作 系统 是 32 位 还 是 64 位 ， 选 择 
QGIS Standalone Installer Version 2.6 (32 bit) 或 QGIS Standalone Installer Version 2.6 (64 bit) 。 
本 书 编写 时 最 高 版 本 是 2.6, 如 果 读 者 在 阅读 时 QGIS 推出 了 更 高 版 本 的 , 可 以 下 载 高 版 本 的 。 
对 于 32 位 的 Windows 操作 系统 的 读者 ， 也 可 使 用 本 书 提 供 的 安装 程序 ， 即 位 于 Tools 
文件 夹 中 的 QGIS-OSGeo4W-2.6.1-1-Setup-x86.exe 文件 。 
(3) 安装 QGIS。 
安装 时 一 切 都 选择 默认 设置 即 可 。 安 装 完成 后 ， 桌 面 上 不 仅 包含 了 QGIS Desktop 程序 快 
捷 键 ， 此 外 还 包含 了 其 他 4 个 应 用 程序 的 快捷 键 ， 包 括 GRASS GIS、OSGeo4W 等 。 
(4) 添加 矢量 文件 。 
打开 QGIS Desktop 程序 。 若 要 加 入 矢量 文件 ， 可 以 通过 窗口 左边 的 “浏览 器 ”定位 到 要 
加 入 的 文件 ， 然 后 将 其 拖 到 “图 层 ” 管 理 器 中 即 可 。 也 可 使 用 总 按 钮 ， 打 开 “ 添 加 矢量 文件 ” 
对 话 框 ， 然 后 通过 “浏览 ”按钮 找到 需要 的 文件 。 不 过 要 说 明 的 是 ， 虽 然 一 个 Shapefile 同时 


roads.shp 文件 。 

(5) 设置 符号 。 

在 “图 层 ” 管理 器 中 双击 roads 图 层 , 就 会 弹出 “图 层 属性 ”对 话 框 , 在 左边 部 分 选择 “ 样 
式 ” 标 签 ， 切 换 到 “样式 ”面板 中 。 由 于 roads 图 层 包 含 的 是 线 要 素 ， 因 此 在 该 面板 中 可 以 设 
置 线 的 颜色 、 线 的 宽度 、 可 视 比例 范围 以 及 注 记 等 。 通过 “样式 ”面板 ,将 roads 图 层 的 线 符 
号 设置 为 细 灰 线 ， 即 Residential road 符号 。 

(6) 设置 注 记 。 

在 “图 层 属性 ”对 话 框 中 的 左边 部 分 选择 “标签 ”标签 ， 切 换 到 “标签 ”面板 。 首 先 将 
注 记 字段 设置 为 name， 并 将 注 记 文本 颜色 设置 为 灰色 。 然 后 切换 到 “位 置 ”小 面板 ， 将 注 记 
与 道路 线 之 间 的 距离 设置 为 5 毫米 ， 如 图 1.10 所 示 。 


一 Web GIS 原理 与 应 用 开发 


EN 
-ls 会 
站 
也 
®] hb 
他 年 基线 宁 上 方才 中 网 。 人 方 
Sn] 
on 司 名 
3 & 
epee 0 0000 & 
到 所 
的 S| 
A Au MA 
3 C2] EJ] wm 


1.10 设置 图 层 注 记 的 位 置 


在 “标签 ”面板 中 选择 “ 泻 染 ”标签 ， 在 其 中 将 注 记 显示 的 最 小 比例 尺 设置 为 1:10000， 
以 避免 在 小 于 该 比例 尺 时 还 显示 注 记 。 为 了 防止 重复 注 记 ， 可 在 “要 素 选项 ”部 分 选择 “ 合 
并 相连 的 线条 以 防止 重复 注 记 ” 选项 。 

通过 这 样 的 设置 后 ， 可 得 到 如 图 1.11 所 示 的 效果 。 


加 QGIS 2.6.1-Brighton - -EN 
项 目 仿 颖 轴 (8) 视 届 人 国民 I 计 轴 人 ) 播 站 避 ) 矢量 如 袖 交 他 数据 床 @) 网 络 人 Troeessine 部 助 如 
号 目 届 哆 0 名 RPSNNPDAAAY QQ 。 国 。 


图 1.11 设置 道路 的 符号 与 注 记 之 后 的 效果 


(7) 设置 natural 图 层 。 
在 地 图 中 加 入 natural.shp 数据 。 将 其 样式 设置 为 不 带 边界 的 淡 绿色 填充 符号 。 需 要 按照 
图 1.12 的 方式 ， 将 “边界 样式 ”设置 为 “不 显示 画笔 ”才能 实现 该 目的 。 
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1.12 设置 不 显示 边界 的 符号 
(8) 设置 buildings 图 层 。 


在 地 图 中 加 入 buildings.shp 数据 ， 这 是 建筑 物 图 层 。 对 于 建筑 物 ， 当 然 最 好 是 让 其 有 突 
出 的 效果 。 而 这 可 以 使 用 多 个 符号 来 实现 ， 步 又 如 图 1.13 所 示 。 


加 导电 性- buildings | 酝 式 


按钮 在 下 方 增加 


先 用 该 
第 二 个 颜色 更 深 的 符号 


图 1.13 ”对 同一 图 层 设置 多 个 符号 
(9) 在 地 图 中 加 入 bus_stops.shp， 这 是 公交 站 点 的 数据 。 

将 其 样式 设置 为 蓝 色 填充 的 公交 SVG 标记 。SVG 指 可 伸缩 矢量 图 形 (Scalable Vector 
Graphics) ， 使 用 XML 格式 定义 图 形 。SVG 图 像 在 放大 或 改变 尺寸 的 情况 下 其 图 形 质 量 不 会 
有 所 损失 。 并 在 “图 层 属性 ”对 话 框 的 “通用 ”面板 中 , 将 其 显示 的 最 小 比例 尺 设置 为 1:10000。 
在 “通用 ”面板 中 还 可 以 设置 图 层 中 “图 层 ” 管 理 器 中 显示 的 名 称 。 例 如 bus_stops.shp 默认 
显示 为 bus_stops， 我 们 可 以 将 其 设置 显示 为 “公交 站 点 ”， 更 直观 易 懂 。 

(10) 设置 地 图 提示 。 

在 图 层 管理 器 中 高 亮 选择 “公交 站 点 ”图 层 ， 然 后 单 击 “ 地 图 提示 工具 ”按钮 ， 这 时 如 
果 将 鼠标 悬 停 在 某 公 交 站 点 要 素 上 时 ， 就 会 显示 该 站 点 的 名 称 。 

配置 完成 后 ， 整 个 地 图 显示 效果 如 图 1.14 所 示 。 
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QGIs 2.6.1-Brighton RD 
项 目 全) 编辑 伍 ) 视图 ) 图 层 (L) 设置 (G) 插件 (F) 打量 (0) 樟 格 (E) 孝 据 庄 (0) 网 洛 全 Processinz 帮助 0 
ULEEEINERTJ FT ER E 
沙洲 四. 号 育 : "| 


EE 
Wo gsm 昌国 


EE ASE 


= 


网 sf: -75.6052, S42115 比例 R [L631 ”jw| 项 演 zs 加 四 


图 1.14 设置 多 个 图 层 样式 后 的 地 图 


(11) 保存 地 图 。 
选择 “项 目 ” 菜 单 中 的 “保存 ”菜单 项 ， 将 地 图 保存 为 Ottawa.qgs。 
QGIS 使 用 .qgs 保存 地 图 ， 为 XML 格式 ， 可 以 使 用 文本 编辑 器 打开 。 


1.6 习 题 


(1) 利用 Firebug 工具 查看 Google 地 图 (ditu.google.cn) 、 必 应 地 图 (cn.bing.com/ditu/) 、 
开放 街道 地 图 (www.openstreetmap.org) 以 及 天 地 图 (www.tianditu.cn) 网站。 


。 了 解 这 些 网 站 是 如 何 组织 地 图 切片 的 ， 有 什么 异同 。 
。 进一步 了 解 Firebug 的 使 用 。 


(2) 在 Ottawa.qgs 地 图 中 再 加 入 其 他 矢量 文件 ， 并 配置 符号 与 注 记 等 ， 使 地 图 在 各 种 比 
例 尺 下 都 比较 美观 而 且 内 容 丰 富 。 

(3) 用 文本 编辑 器 打开 Ottawa.qgs 文件 ， 查 看 QGIS 是 如 何 组 织 地 图 的 。 

(4) 阅读 以 下 材料 ， 了 解 商业 软件 公司 是 如 何 参与 开源 运动 的 。 


。 开源 技术 与 ESRI ( http://www.esri.com/news/arcnews/springl1articles/open-source- 
technology-and-esri.html )。 
。 ESRI 与 开源 (http://www.esri.com/products/arcgis-capabilities/open-source )。 
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Web 服务 与 Web GIS 的 设计 


从 本 章 可 以 学 习 到 : 

必 Web GIS 的 系统 架构 

必 Web 地 图 的 组 成 

GeoServer 的 安装 与 初步 使 用 


一 Web GIS 原理 与 应 用 开发 


在 第 1 章 中 介绍 了 Web GIS 的 发 展 历史 。 那么 , 要 利用 计算 机 中 的 原始 地 理 空间 数据 集 ， 
创建 一 个 美观 、 交 互 性 强 、 成 千 上 万 用 户 使 用 的 Web GIS 应 用 ， 应 该 从 哪里 开始 呢 ? 首先 必 
须 了 解 当 前 Web GIS 的 系统 架构 ， 从 宏观 层面 把 握 Web GIS 的 构成 。 除 了 系统 架构 之 外 ， 本 
章 还 将 介绍 Web 地 图 的 构成 ， 包 括 基础 地 图 、 专 题 图 层 、 交 互 小 组 件 以 及 每 个 构成 部 分 的 角 
色 与 作用 。 最 后 将 介绍 用 于 创建 地 理 Web 服务 的 开源 软件 GeoServer 的 安装 与 初步 应 用 ， 包 
括 GeoServer 的 Web 管理 页 面 及 图 层 预览 等 。 


2.1 Web GIS 的 系统 架构 


通常 一 个 Web GIS 应 用 系统 会 使 用 几 台 物理 计算 机 来 存储 数据 、 处 理 数据 、 制 作 地 图 、 
发 布 服务 以 及 访问 应 用 等 ， 一 般 使 用 系统 架构 图 来 描述 ， 这 些 不 同 的 计算 机 处 于 不 同 的 层 中 。 
虽然 ， 本 书 中 实践 部 分 为 了 方便 读者 操作 ， 使 用 一 台 计 算 机 来 同时 承担 这 些 不 同 的 角色 ， 但 
是 必须 要 清楚 这 些 不 同 的 层 的 作用 ， 以 及 它们 是 如 何 协同 构成 一 个 完整 的 系统 。 

-个 完整 的 Web GIS 系统 架构 包括 数据 服务 器 、GIS 服务 器 、Web 服务 器 与 使 用 该 系统 
的 各 种 终端 〈 客 户 端 、 移 动 端 、 浏 览 器 等 ) 以 及 服务 管理 员 与 服务 发 布 者 ， 如 图 2.1 所 示 。 


Web 客 户 端 
实用 
外 部 网 络 


GE Web 服 务 器 
恒 (人 GIS 服 务 器 
上 
内 部 局 域 网 
内 部 客户 {oy 
消 应 用 


文件 服务 器 数据库 服务 器 


图 2.1 Web GIS 系统 架构 图 


(1) 数据 服务 器 是 很 容易 理解 的 ,用 于 存储 GIS 服务 所 需要 的 各 种 空间 数据 ， 有 可 能 是 
文件 服务 器 ， 存 储 了 地 图 切片 或 Shapefile 等 格式 的 空间 数据 ， 也 可 能 是 数据 库 服务 器 ， 以 数 
据 库 的 方式 存储 空间 数据 。 这 些 服务 器 通常 会 要 求 有 宛 余 存 储 机 制 以 及 定期 备份 脚本 ， 以 防 
止 数 据 丢失 。 

(2) GIS 服务 器 是 安装 在 服务 器 机 器 上 的 核心 软件 ， 该 软件 用 于 创建 Web 服务 。 这 些 
Web 服务 包括 绘制 地 图 、 同 步 数 据 库 、 投 影 几何 对 象 、 搜 索 数 据 并 执行 许多 其 他 空间 ， 分 析 
操作 。 由 于 GIS 服务 器 是 一 个 Web GIS 的 核心 ， 一 般 都 要 求 性 能 较 高 、 处 理 能 力 强 的 ， 不 过 
可 以 同时 使 用 多 台 GIS 服务 器 。 在 这 个 多 个 GIS 服务 器 中 可 以 根据 服务 器 的 性 能 或 者 根据 应 
用 的 不 同 而 进行 分 组 ， 不 同 的 组 用 于 处 理 不 同 的 服务 ， 比 如 说 性 能 比较 好 的 机 器 用 于 处 理 地 
理 处 理 服务 ， 性 能 一 般 的 用 于 处 理 地 图 服务 ， 这 种 结构 如 图 2.2 所 示 。 
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Client 


Map service Geoprocessing 
A equest service request 


Cluster A ClusterB 
(Map services) (Geoprocessing services) 


2.2 不 同性 能 的 机 器 处 理 不 同类 型 的 服务 


本 书 将 使 用 GeoServer 来 发 布 空间 信息 Web 服务 。 
(3) Web 服务 器 是 运行 Web GIS 应 用 程序 或 非 空间 信息 Web 服务 的 计算 机 。 该 服务 器 
是 访问 Web GIS 的 入 口 , 也 是 放置 Web GIS 应 用 程序 代码 (包括 HTML 与 JavaScript 文件 等 ) 
的 地 方 。 
在 安装 GeoServer 时 ， 也 会 同时 安装 一 个 内 嵌 的 Jetty 的 Web 服务 器 。Jetty 是 一 个 开源 
的 Servlet 容器 ， 它 为 基于 Java 的 Web 内 容 ， 例 如 JSP 和 Servlet 提供 运行 环境 。Jetty 是 使 用 
Java 语言 编写 的 ， 它 的 API 以 一 组 JAR 包 的 形式 发 布 。 开 发 人 员 可 以 将 Jetty 容器 实例 化 成 
-个 对 象 ， 可 以 迅速 为 一 些 独 立 运 行 (stand-alone) 的 Java 应 用 提供 网 络 和 Web 连接 。 因 此 ， 
为 了 测试 ， 可 以 将 代码 放置 在 Jetty 的 主 文件 夹 下 。 本 书 中 后 面 会 介绍 该 方法 。 
当然 ， 虽 然 GeoServer 是 Java 的 应 用 程序 ， 但 是 其 发 布 的 是 Web 服务 ， 因 此 对 于 访问 该 
服务 的 Web GIS 应 用 ， 可 以 使 用 .NET 编写 ， 也 可 以 使 用 Java 编写 。 对 于 .NET 编写 的 应 用 程 
序 ， 可 以 部 署 在 IIS (Internet Information Services， 互 联网 信息 服务 ) Web 服务 器 上 。 本 书后 
面 也 会 介绍 该 方法 。 
此 外 ， 由 于 当前 主流 的 Web GIS 直接 使 用 JavaScript 访问 Web 服务 ， 而 JavaScript 是 运 
行 在 浏览 器 上 的 , 因此 是 直接 访问 Web 服务 , 而 不 需要 Web 服务 器 。 对 于 那些 没有 使 用 .NET 
或 Java 代码 的 Web GIS,， 作 为 测试 ， 则 并 不 需要 将 这 些 代码 部 署 到 Web 服务 器 中 , 直接 在 浏 
览 器 中 打开 包含 JavaScript 代码 的 HTML 页 面 即 可 。 当 然 ， 如 果 需 要 其 他 计算 机 的 浏览 器 也 
能 访问 该 Web GIS 应 用 ， 那 么 必须 将 其 部 署 到 Web 服务 器 中 。 本 书后 面 也 会 介绍 该 方法 。 
(4) Web GIS 应 用 需要 管理 员 来 安装 软件 、 配 置 Web 应 用 程序 以 及 调整 站 点 以 获取 最 
佳 性 能 。GeoServer 管理 员 使 用 GeoServer Web 管理 页 面 来 发 布 与 管理 空间 信息 Web 服务 。 
管理 员 可 以 寻求 开发 人 员 的 帮助 或 自己 学 习 脚本 技巧 ， 从 而 通过 GeoServer Administrator API 
自动 执行 管理 任务 。 内 容 创作 者 需要 使 用 客户 端 应 用 程序 来 创建 要 发 布 到 站 点 的 GIS 资源 ( 例 
如 地 图 和 地 理 数 据 库 ) 。 在 将 资源 发 布 到 服务 器 的 过 程 中 ， 这 些 应 用 程序 也 可 以 起 到 辅助 作 
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到 Web GIS 原理 与 应 用 开发 


用 。 本 书 介绍 使 用 QGIS 以 及 GDAL 等 命令 行 工具 来 完成 这 些 任务 。 

(5) Web、 移 动 和 桌面 应 用 程序 都 可 连接 到 GIS 服务 器 发 布 的 空间 信息 Web 服务 。 这 
些 应 用 程序 的 终端 用 户 依靠 Web 服务 来 获得 GIS 数据 或 实现 分 析 , 但 是 它们 可 能 不 知道 有 关 
该 Web 服务 的 详细 信息 或 者 不 知道 可 获得 哪些 服务 。 当 规划 部 署 的 规模 和 范围 时 ， 全 面 了 解 
访问 Web 服务 的 终端 用 户 数 以 及 它们 对 该 站 点 的 使 用 模式 很 有 价值 。 


2.2 Web 地 图 的 组 成 


Web 地 图 是 引用 一 组 地 图 和 空间 信息 Web 服务 构成 的 有 效 地 图 , 可 以 在 任意 客户 端 进行 
使 用 (桌面 应 用 程序 、Web 应 用 程序 、 移 动 设备 等 ) 。 每 个 Web 地 图 都 由 一 个 或 多 个 Web 
地 图 服务 组 成 ， 这 些 地 图 服务 共同 为 用 户 提供 有 效 的 地 图 体验 。 

Web 地 图 通过 交互 式 的 地 理 信 息 展示 ， 可 以 讲述 故事 以 及 回答 问题 。 例 如 ， 可 以 找到 或 
创建 解决 此 问题 的 地 图 : “美国 有 多 少 人 居住 在 距离 超市 合理 的 步行 距离 或 车 程 内 ?”。 此 
Web 地 图 包含 显示 了 哪些 住宅 区 在 距离 超市 10 分 钟 的 车 程 或 1 英里 的 步行 距离 内 的 图 层 。 
为 提供 背景 环境 ， 此 Web 地 图 还 应 包含 地 形 底 图 ， 其 中 包括 城市 、 道 路 以 及 琶 加 在 土地 覆 被 
上 的 建筑 物 和 晕 泻 地 貌 影像 。 

制作 Web 地 图 与 使 用 客户 端 GIS 软件 创建 地 图 存在 非常 大 的 差异 , 主要 表现 在 以 下 几 个 
方面 : 

(1) 在 Web 地 图 中 ， 用 户 看 到 的 所 有 信息 都 是 通过 网 络 由 服务 器 发 送 到 浏览 器 的 ， 因 
此 这 就 引入 了 延迟 。 

(2) 在 Web 地 图 中 ， 地 图 的 内 容 可 以 同时 来 自 几 个 不 同 的 服务 器 。 因 此 地 图 性 能 受到 
服务 器 的 可 访问 性 与 速度 的 限制 。 

(3) 在 Web 地 图 中 ， 性 能 可 能 受到 同时 在 线 用 户 数 量 的 影响 。 

(4) 在 Web 地 图 中 ， 用 户 体验 同时 也 受到 客户 端 应 用 程序 显示 技术 的 影响 。 该 客户 端 
应 用 程序 通常 就 是 网 页 浏览 器 。 


这 些 考虑 因素 对 于 部 分 人 来 说 显得 很 奇怪 。 例 如 ， 对 于 那些 只 使 用 过 QGIS 或 ArcMap 
的 人 来 说 ， 表 定 不 习惯 考虑 带宽 或 与 他 人 共享 计算 机 。 

更 难 的 是 ， 对 于 新 的 Web 地 图 制作 者 们 来 说 ， 最 大 的 挑战 在 于 了 解 在 他 们 地 图 显示 的 
数据 的 量 ， 以 及 如 何以 亚 秒 级 的 速度 获取 在 Web 用 户 屏幕 上 绘制 的 所 有 信息 。 熟 悉 桌面 GIS 
软件 的 人 ， 习 惯 在 地 图 中 加 入 几 十 个 甚至 上 百 个 图 层 ， 然 后 根据 需要 切换 是 否 显示 。 强 大 的 
桌面 计算 机 或 许 能 够 处 理 这 类 地 图 ， 但 是 ， 如 果 将 该 地 图 直接 移动 到 互联 网 上 ， 那 么 性 能 必 
然 会 是 难以 忍受 的 差 。 服 务 器 需要 宝贵 的 时 间 循环 访问 所 有 的 图 层 ， 获 取 数 据 然后 绘制 ， 最 
后 将 图 片 返回 到 客户 端 。 

针对 这 些 问 题 ， 解 决 方案 是 根据 不 同 的 处 理 方法 将 图 层 归 组 。 将 那些 只 提供 背景 信息 、 
地 理 框 架 信息 的 图 层 归 为 一 组 ， 并 绘制 为 一 个 切片 基础 底 图 。 相 对 于 这 个 组 ， 专 题 图 层 〈 地 
图 中 核心 图 层 ) 作为 一 个 或 多 个 Web 服务 而 又 加 在 底 图 上 。 此 外 ， 通 常 还 需要 包含 一 些 与 专 
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题 图 层 交 互 的 小 组 件 ， 例 如 弹出 式 窗口 、 图 表 以 及 分 析 工 具 等 。 包含 这 3 个 部 分 的 Web 地 图 
如 图 2.3 所 示 。 


The median age in Carter County 
is 46.30 years. 


Age Distribution 


Hover cursor over or tap column for 了 
details. 


> 基础 底 图 < sr 


图 2.3 包含 基础 底 图 、 专 题 图 层 与 交互 小 组 件 的 Web 地 图 
下 面 将 更 详细 地 介绍 这 3 个 部 分 一 一 基础 底 图 、 专 题 图 层 以 及 交互 小 组 件 。 


2.2.1 基础 底 图 


基础 底 图 将 重要 数据 组 织 起 来 ， 构 成 各 种 地 图 可 重复 使 用 的 基础 。 底 图 为 操作 提供 了 基 
础 ， 或 者 说 画布 。 底 图 可 用 于 常规 用 途 ， 例 如 地 形 底 图 、 影 像 底 图 或 街道 底 图 ， 还 可 用 于 某 
一 特定 主题 ， 例 如 水 文 底 图 或 地 质 底 图 。 可 在 底 图 上 绘制 任何 数据 。 底 图 提供 了 地 理 环境 和 
参考 详细 信息 。 底 图 用 于 位 置 参 考 ， 并 为 用 户 提供 登 加 或 聚合 业务 图 层 、 执 行 任务 以 及 可 视 
化 地 理 信息 的 框架 。 底 图 是 执行 所 有 后 续 操 作 和 地 图 制图 的 基础 ， 它 为 地 理 信息 的 使 用 提供 
了 环境 和 框架 。 

虽然 地 图 可 能 包含 许多 图 层 ， 例 如 道路 、 湖 泊 、 建 筑 物 等 ， 通 常会 将 这 些 图 层 栅 格 化 为 
一 系列 的 图 像 切片 ， 并 作为 Web 地 图 中 一 个 图 层 来 对 待 。 这 些 切 片 地 图 包含 了 成 二 上 万 个 预 
先 绘制 的 图 片 ， 保 存在 服务 器 上 ， 当 用 户 漫游 地 图 时 ， 直 接 返 回 这 些 图 片 给 用 户 。 在 第 5 章 
中 将 会 更 详细 介绍 切片 地 图 。 

有 时 使 用 两 层 切片 地 图 来 构成 一 个 底 图 。 例 如 ， 当 使 用 航空 影像 作为 切片 地 图 图 层 时 ， 
由 于 没有 注 记 ， 这 时 为 了 方便 定位 ， 在 该 切片 地 图 上 ， 再 增加 第 二 个 由 道路 、 地 名 等 矢量 数 
据 组 成 的 切片 地 图 ， 共 同 组 成 底 图 。Google 地 图 就 采用 了 这 种 方式 。 天 地 图 将 注 记 单独 作为 
一 切片 图 层 。 这 样 做 的 目的 ， 一 是 可 以 使 单独 切片 地 图 占用 较 少 的 磁盘 空间 ， 另 一 个 是 易于 
更 新 。 
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2.2.2 ”专题 图 层 


专题 图 层 也 称 为 业务 图 层 或 操作 图 层 ， 和 县 加 在 底 图 上 ， 这 也 是 用 户 访问 地 图 的 原因 。 由 
于 大 多 数 人 并 不 关心 专题 图 层 ， 因 此 不 能 将 其 放置 在 底 图 中 。 但 是 一 旦 将 其 作为 Web 地 图 的 
专题 图 层 ， 那 么 这 些 专题 图 层 就 是 用 户 最 感 兴趣 的 。 专 题 图 层 用 于 显示 特定 现象 位 置 和 分 布 
的 空间 信息 。 如 果 地 图 标题 为 “北京 市 银行 网 点 ”， 那 么 银行 网 点 就 是 专题 图 层 。 如 果 地 名 
标题 “亚洲 鸟 类 迁徙 模式 ”， 那 么 迁徙 模式 就 是 专题 地 图 。 

专题 图 层 有 时 可 以 像 底 图 一 样 ， 处 理 为 地 图 切片 ， 但 是 地 图 切片 不 适用 那些 变化 迅速 的 
数据 。 例 如 ， 如 果 需 要 在 地 图 中 显示 警车 的 实时 位 置 ， 这 时 就 不 能 使 用 事先 绘制 好 的 切片 地 
图 了 ,而 需要 使 用 其 他 方式 来 绘制 数据 。 这 时 可 使 用 WMS 等 用 于 动态 绘制 地 图 的 Web 服务 ， 
来 绘制 专题 图 层 。 另 一 种 方式 是 从 服务 器 查询 得 到 所 有 的 数据 ， 返 回 到 客户 端 ， 然 后 在 浏览 
器 中 绘制 。 这 种 方法 还 可 以 进一步 使 用 弹出 窗口 等 交互 小 组 件 来 丰富 页 面 。 

专题 图 层 与 底 图 图 层 共同 组 成 一 个 实际 的 Web 地 图 。 不 过 要 特别 注意 的 是 ， 专 题 图 层 并 
不 一 定 总 是 处 于 地 图 的 最 上 层 。 专 题 图 层 可 以 处 于 两 个 切片 地 图 之 间 。 一 个 实例 就 是 ， 最 底 
层 是 地 形 要 素 底 图 ， 最 上 层 是 注 记 底 图 ， 中 间 是 专题 图 层 〈 图 2.4) ， 可 形象 地 称 为 “地 图 三 
明治 ”。 


顶部 图 民 〈 注 记 ) 


中 间 图 层 (专题 ) 


底部 图 层 〈 地 形 ) 


图 2.4 地 图 三 明治 


我 国 的 天 地 图 就 是 按照 这 种 方式 处 理 的 , 也 就 是 将 地 形 要 素 与 注 记 分 别处 理 为 切片 地 图 ， 
共同 组 成 为 底 图 ， 以 方便 在 其 间 插 入 专题 图 层 ， 如 图 2.5 所 示 。 
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图 2.5 天 地 图 中 同 范围 内 的 地 形 要 素 与 注 记 切片 地 图 
2.2.3 ”交互 小 组 件 


Web 地 图 中 常常 带 有 交互 小 组 件 ， 以 便 用 户 更 进一步 查询 地 图 中 的 图 层 。 例 如 ， 当 用 户 
单 击 某 一 地 物 要 素 时 ， 会 弹出 一 小 窗口 显示 其 信息 ， 在 页 面 的 另 一 部 分 显示 图 表 ， 地 图 中 还 
显示 一 个 时 间 轴 以 便 切 换 数据 显示 年 代 等 。 一 些 Web 地 图 还 提供 实时 编辑 GIS 数据 的 功能 ， 
或 向 服务 器 提交 地 理 处 理 任务 ， 并 在 浏览 器 中 绘制 响应 结果 。 一 些 Web 地 图 提供 空间 分 析 功 
能 ， 例 如 路 径 分 析 、 可 达 范 围 、 通 视 分 析 等 。 

这 些 交互 小 组 件 使 得 Web 地 图 鲜 活 起 来 。 要 想 使 自己 的 Web 地 图 有 用 ， 其 中 一 个 关键 
就 是 包含 这 些 交互 小 组 件 ， 但 是 也 只 需要 包含 那些 对 用 户 最 有 用 的 ， 而 不 是 提供 一 大 堆 的 选 
项 ， 或 功能 非常 复杂 ， 让 用 户 望 而 却步 。 有 时 即使 是 一 点 点 的 进一步 开发 工作 ， 例 如 在 弹出 
窗口 中 使 用 用 户 友好 的 字段 别名 ， 就 可 能 使 得 地 图 更 有 用 、 更 可 用 。 

交互 小 组 件 是 需要 编码 工作 的 部 分 ， 其 多 少 及 其 可 使 用 性 与 JavaScript 的 编码 量 息 息 相 
关 。 不 过 ， 可 以 使 用 OpenLayers 或 Leaflet 等 这 些 开 放 的 地 图 API 来 简化 开发 工作 ， 此 外 ， 
还 可 以 使 用 更 为 基础 的 JavaScript 类 库 ， 例 如 Dojo、JQuery 等 ， 来 提供 更 基础 的 帮助 。 在 后 
面 的 内 容 中 会 介绍 OpenLayers 及 Dojo 的 使 用 。 


2.3 实践 2: GeoServer 的 安装 与 初步 使 用 


GeoServer 是 OGC Web 服务 器 规范 的 J2EE 实现 ,利用 GeoServer 可 以 方便 地 发 布地 图 数 
据 ， 允 许 用 户 对 特征 数据 进行 更 新 、 删 除 、 插 入 操作 ， 通 过 GeoServer 可 以 比较 容易 地 在 用 
户 之 间 迅 速 共 享 空 间 地 理 信 息 。GeoServer 是 自由 及 开源 软件 。 

GeoServer 主要 包含 如 下 一 些 特点 : 
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e 兼容 WMS 和 WEFS 特性 ; 

e。 支持 PostGIS、Shapefile、ArcSDE、Oracle、VPF、MySQL、MapInfo; 
。 支持 上 百 种 投影 ; 

。 能 够 将 网 络 地 图 输出 为 JPEG、GIF、PNG、SVG、KML 等 格式 ; 

。 能 够 运行 在 任何 基于 J2EE/Servlet 容器 之 上 ; 

。 嵌入 MapBuilder 支持 AJAX 的 地 图 客户 端 OpenLayers。 


(1) 安装 Java。 
由 于 GoeServer 是 基于 Java 开发 的 。 因 此 在 安装 之 前 ， 必 须 确保 安装 了 Java。Java 下 载 
地 址 为 https://www.java.com/zh_CN/。 
(2) GeoServer 下 载 。 
通过 www.geoserver.org 访问 GeoServer 的 主页 ， 单 击 “Download ”按钮 ， 进 入 下 载 页 面 。 
选择 下 载 稳定 版 本 (本 书 编写 时 稳定 版 本 是 2.6.2) ， 然 后 选择 Windows 安装 程序 。 读 者 也 可 
直接 使 用 本 书 下 载 文件 的 Tools 文件 夹 中 的 geoserver-2.6.2.exe 文件 。 
(3) 安装 GeoServer。 
双击 安装 文件 ， 所 有 设置 都 接受 默认 值 。 
(4) 启动 GeoServer。 
安装 GeoServer 之 后 ， 选 择 “ 开 始 > 所 有 程序 > GeoServer 2.6.2 > Start GeoServer”， 启 动 
的 是 一 控制 台 应 用 程序 ， 在 其 中 显示 一 系列 的 启动 状态 信息 ， 如 图 2.6 所 示 。 


Start GeoServer | 


19 11:53:39.537::INF0: Started Selec oreB_B.B.9:8989 


图 2.6 GeoServer 启动 界面 
稍 等 片刻 ， 直 到 信息 停止 添加 。 必 须 保 持 本 窗口 打开 ， 因 为 关闭 该 窗口 就 是 关闭 
GeoServer。 当 我 们 与 GeoServer 交互 时 ， 也 会 在 该 窗口 中 显示 信息 ， 这 些 信 息 可 以 帮助 排除 
故障 。 
(5) 打开 GeoServer 的 Web 管理 页 面 。 
GeoServer 的 控制 和 管理 是 基于 网 页 形式 ， 所 有 和 GeoServer 相关 的 操作 都 要 通过 这 个 
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Web 管理 界面 来 进行 ， 包 括 全 局 设置 、 数 据 发 布 与 服务 配置 等 。 

通过 选择 “开始 > 所 有 程序 > GeoServer 2.6.2 > GeoServer Web Admin Page”， 或 者 直接 在 
浏览 器 中 输入 “http://localhost:8080/geoserver/web/” 地 址 ， 进 入 GeoServer 的 Web 管理 页 面 。 
通过 该 页 面 可 以 从 安装 了 GeoServer 的 计算 机 或 网 络 中 其 他 计算 机 上 管理 GeoServer。 由 于 安 
装 GeoServer 时 也 同时 安装 了 一 个 名 为 Jetty 的 Web 服务 器 ， 默 认 设置 其 监听 端口 为 8080， 
因此 该 计算 机 能 响应 Web 服务 与 页 面 的 请 求 。 

(6) 登录 GeoServer 的 Web 管理 页 面 。 

在 GeoServer 的 Web 管理 页 面 中 输入 用 户 名 与 密码 进行 登录 。 如 果 是 默认 安装 ， 那 么 用 
户 名 为 “admin”， 密 码 为 “geoserver”。 

登录 以 后 ， 可 看 到 图 2.7 所 示 的 页 面 。 


文件 昌 ”篇 福 E) 查看 (V) 历史 (G) 书签 B) 工具 (中 帮 动 (H) ee x | 
过 Geosever ri x 【十 
€ 国 httpyV/localhost ‘geowerver/web C4 -三 


王 录 身份 admn， 守 到 


i GeoServer 


关于 和 状态 

蕊 服 务 器 状态 
6eoserve[ 的 日 志 

2 联系 方式 

轩 关于 GeoSever 


这 个 GeoServer 起 于 The ancent geographes INC. 


数据 19 屋 © hEe 1.0.0 
| 1.1.0 
国 ee Prevew 9 两 店 各 水 加 在 寻 原 111 
工作 区 人 
让 从 7 工人 区 © etRIfFE 11 
国 国 E 2.0.1 
福 图 民 组 The master password for th server has not been changed from the defauk. 5 a 
号 Syes highly recommended that you change t now. Change & 1.0.0 
11.0 
服务 a The admnistrator password for this server has not been changed from the defauk. Ks 204 
到 wcs highly recommended that you change & now, Change & WMS 
111 
EG wrs 
到 ws s No strong cryptography avaiable, instalation of the unrestricted polcy jar files 1.3.0 
recommended ™s 
设置 1.0.0 
是 全 球 Ths GeoServer nstance 5 running verson 2.6.2. For more nformation please contact the WMSC 
本 JAI admnetrator 二 
酌 项 产 率 访问 1.0.0 
Tile Caching 
国 Tle Layers 
@ Cachng pefauts | 
国 Grdsets ~ 


2.7 ”GeoServer 的 Web 管理 页 面 


与 ArcMap、QGIS 将 整个 地 图 处 理 为 .mxd 或 .qgs 不 同 的 是 ，GeoServer 使 用 的 是 图 层 与 
图 层 组 的 概念 。 将 在 服务 器 上 准备 发 布 为 服务 的 数据 定义 为 一 组 数据 集 ， 然 后 规定 在 发 布 为 
Web 服务 时 的 一 些 参数 。 
GeoServer 在 安装 后 已 经 自 带 了 一 些 样 例 图 层 与 服务 。 我 们 先 通过 查看 这 些 样 例 ,来 初步 
了 解 一 下 GeoServer。 
(7) 图 层 预览 。 
在 GeoServer 的 Web 管理 页 面 的 左边 菜单 的 “数据 ”部 分 ， 单 击 “Layer Preview” 菜 单 


31 


一 Web GIS 原理 与 应 用 开发 


项 ， 将 在 页 面 的 右边 部 分 列 出 了 所 有 可 预览 的 图 层 。 向 下 滚动 滚动 条 ， 滚 动 到 
topp:tasmania_state boundaries， 如 图 2.8 所 示 ， 然 后 单 击 OpenLayers 链接 。 


通 topp:states USA Population DpenLayers KML GML |， Select one | 
topp:tasmania_cties Tasmania ties OpenLayers KML GML |Select one 品 
MA topp:tasmana_roads Tasmania roads OpenLayers KML GML |Select one | 
topp:tasmania_state_boundaries «Tasmania state boundares (Dpentayers ou GML |Select one 加 
topp:tasmania_ water bodies 。。 Tasmania water bodies 。 OpenLayers KML GML |Select one 加 


图 2.8 在 图 层 列表 中 单 击 “OpenLayers” 连 接 进 行 图 层 预览 


这 会 将 地 图 显示 为 可 漫游 的 Web 服务。 该 服务 满足 OGC 的 WMS 规范 。 地 图 的 框架 与 
漫游 按钮 都 是 基于 OpenLayers JavaScript 框架 创建 的 。 

此 外 ， 还 可 以 从 每 行 的 最 右边 的 下 拉 列 表 框 中 选择 “WMS > OpenLayers”， 实 现 同样 的 
功能 。 仔 细 查 看 下 拉 列 表 框 中 的 内 容 ， 了 解 GeoServer 支持 的 不 同 输出 格式 。 

关闭 图 层 预览 窗口 ， 返 回 到 GeoServer 图 层 预览 列表 页 面 。 这 次 单 击 “KML” 连 接 ， 这 
会 使 用 KML 格式 获取 图 层 。 如 果 安 装 了 Google Earth， 那 么 将 会 使 用 Google Earth 打开 该 图 
层 。 如 果 没 有 安装 Google Earth， 那 么 可 使 用 Notepad 等 文本 工具 打开 该 图 层 。 

除了 使 用 不 同 格式 请 求 某 图 层 ， 还 可 以 请 求 一 组 图 层 。 

在 GeoServer 图 层 预 览 列 表 页 面 ， 滚 动 到 Tasmania 图 层 组 (绿色 的 正方 形 符号 ) 行 ， 单 
击 “OpenLayers” 连 接 ， 使 用 OpenLayers 打开 Tasmania 图 层 组 ， 如 图 2.9 所 示 ， 可 以 看 到 3 
个 图 层 都 显示 在 地 图 中 了 。 

四 四 :| 


) 国 openLayes map preview x 【十 


vel 4 el-| 三 | 


4 


https//lccalhost:S 


Scale =1: 7M 147.89860, -37.57829 
Click on the map to get feature info 


2.9 使 用 OpenLayers 打开 图 层 组 
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24 习 题 


(1) 利用 Firebug 等 工具 分 析 如 下 几 个 Web GIS 网 站 : 


。 北京 公交 网 ( www.bjbus.com/map ); 

。 图 吧 (www.mapbar.com/search/ ); 

。 我 要 地 图 (www.51ditu.com ); 

。 “天 地 图 安徽 ”团购 专题 应 用 (ahcityahmap.gov.cn/tuangou/ )。 


回答 如 下 问题 :; 


。 在 地 图 中 区 分 基础 底 图 、 专 题 图 层 以 及 交互 小 组 件 ; 

。 查看 服务 器 使 用 了 哪些 技术 提供 地 图 、 专 题 图 层 以 及 交互 小 组 件 的 ， 例 如 切片 、 动 态 
生成 图 片 还 是 浏览 器 端 绘制 失 量 图 形 等 ; 

。 查看 使 用 了 哪些 软件 及 开发 框架 ， 分 别 是 商业 软件 还 是 开源 软件 ; 

。 提出 使 网 站 运行 更 快 与 更 实用 的 建议 。 


(2) 熟悉 GeoServer 的 Web 管理 页 面 内 容 与 功能 ， 并 注意 查看 在 GeoServer 启动 控制 台 
窗口 中 显示 的 信息 。 
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从 本 章 可 以 学 习 到 : 


人 


学 


* 空间 数据 常用 的 开放 格式 


Web GIS 中 的 数据 层 


处 理 空间 数据 的 开源 工具 


人 


人 


他 


使 用 QGIS 裁 草 与 投影 变换 矢量 数据 
使 用 QGIS 处 理 栅 格 数据 
PostGIS 的 安装 与 初步 使 用 


第 3 章 空间 数据 的 存储 与 处 理 四 


在 任何 Web GIS 应 用 的 下 方 ， 都 是 显示 在 地 图 中 表示 地 理 实 体 的 数据 ， 当 然 这些 数 据 除 
了 展示 在 地 图 上 的 空间 位 置信 息 之 外 ， 还 包含 有 大 量 的 属性 信息 。 那 么 如 何 存储 与 处 理 这 些 
空间 数据 呢 ? 本 章 将 介绍 在 自由 及 开源 软件 领域 存储 与 处 理 空间 数据 的 多 种 选择 。 虽 然 受 篇 
幅 限制 ， 并 没有 充分 介绍 数据 库 的 理论 及 其 设计 ， 但 是 详细 介绍 了 满足 各 种 应 用 的 多 种 数据 
格式 。 具体 内容 包括 列 出 了 空间 数据 常见 的 开放 格式 ， 各 种 数据 存储 结构 和 格式 的 优点 。 最 
后 以 实践 的 方式 介绍 了 如 何 使 用 QGIS 与 GDAL 来 处 理 GIS 数据 ， 以 及 如 何在 PostGIS 中 创 
建 空间 数据 库 并 导入 空间 数据 。 


3.1 空间 数据 常用 的 开放 格式 


Web 服务 也 是 空间 数据 共享 与 互 操作 的 一 种 重要 方式 ， 因 此 也 能 称 为 空间 数据 的 一 种 格 
式 ， 但 是 这 里 只 介绍 能 独立 存储 在 本 地 硬盘 文件 或 空间 数据 的 格式 。 


3.1.1 基于 文件 的 数据 


基于 文件 的 数据 包括 Shapefile、KML、GeoJSON 以 及 其 他 类 型 的 文本 文件 。 所 有 的 矢量 
数据 格式 都 有 相应 机 制 存 储 每 个 地 理 要 素 的 几何 位 置 与 属性 。 此 外 , 在 KML 等 一 些 数据 格式 
中 还 可 以 存储 样式 信息 。 这 里 介绍 了 最 常用 的 基于 文件 的 数据 格式 。 


3.1.1.1 Shapefile 


Shapefile 是 ESRI 开发 的 一 种 空间 数据 开放 格式 。 目 前 , 该 文件 格式 已 经 成 为 了 地 理 信息 
软件 界 的 一 个 开放 标准 ， 也 是 一 种 重要 的 矢量 数据 交换 格式 。 

Shapefile 文件 格式 实际 上 是 由 多 个 文件 组 成 的 。 其 中 ， 要 组 成 一 个 Shapefile， 有 3 个 文 
件 是 必 不 可 少 的 ， 它 们 分 别 是 .shp、.shx 与 .dbf 文件 。 表 示 同 一 数据 的 一 组 文件 其 文件 名 前 绥 
应 该 相同 。 例 如 ， 存 储 一 个 关于 湖 的 几何 与 属性 数据 ， 就 必须 有 lake.shp、lake.shx 与 lake.dbf 
这 3 个 文件 。 而 其 中 “真正 ”的 Shapefile 的 后 级 为 .shp， 然 而 仅 有 这 个 文件 数据 是 不 完整 的 ， 
必须 要 把 其 他 两 个 附带 上 才能 构成 一 组 完整 的 地 理 数 据 。 除 了 这 3 个 必需 的 文件 以 外 ， 还 有 
8 个 可 选 的 文件 ， 使 用 它们 可 以 增强 空间 数据 的 表达 能 力 。 此 外 ， 所 有 的 文件 都 必须 位 于 同 

-个 文件 夹 之 中 。 


31.4:2 "KML 


KML 是 一 种 基于 XML 的 格式 ， 用 于 存储 地 理 数 据 和 相关 内 容 。KML 文件 要 么 以 .kml 
为 扩展 名 ， 要 么 以 .kmz 表示 压缩 的 KML 文件 ) 为 扩展 名 。 

KML 由 Keyhole 公司 开发 ， 此 后 该 公司 被 Google 收购 。2008 年 ，Google 自愿 将 KML 
提交 给 OGC， 宣 布 不 再 控制 KML 标准 ， 而 移交 给 OGC 去 维护 发 展 ， 从 而 成 为 OGC 的 一 种 
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定 方 标准 。 

KML 可 以 由 要 素 和 栅 格 元 素 组 成 ， 这 些 元 素 包 括 点 、 线 、 面 和 影像 ， 以 及 图 形 、 图 片 、 
属性 和 HTML 等 相关 内 容 。 尽 管 通常 将 数据 集 视 为 独立 的 同类 元 素 〈 例 如 ， 点 要 素 类 只 能 包 
含 点 ， 栅 格 只 能 包含 像 元 或 像素 ， 而 不 能 包含 要 素 ) ， 但 单个 KML 文件 却 可 以 包含 不 同类 型 
的 要 素 ， 并 可 包含 影像 。 

由 于 KML 是 单个 的 高 度 可 移植 文件 ， 可 包含 图 层 的 全 部 内 容 和 要 素 几 何 、 影 像 、 符 号 系 
统 、 描 述 、 属 性 等 地 图 元 素 ， 以 及 其 他 相关 内 容 ， 并 且 可 通过 许多 受 欢 迎 的 免费 应 用 程序 进 
行 查看 ， 如 Google 地 球 和 ArcGIS Explorer， 所 以 KML 成 为 与 广大 公众 共享 地 理 数 据 的 极 佳 
格式 。 现 在 很 多 GIS 相关 企业 也 追随 Google 开始 采用 此 种 格式 进行 地 理 数据 的 交换 。 


3.1.1.3 GeoJSON 与 TopoJSON 


JSON 是 一 种 轻 量 级 的 数据 交换 格式 , 易于 用 户 阅读 和 编写 , 同时 也 易于 机 器 解析 和 生成 。 
它 基 于 JavaScript 编程 语言 。 JSON 采用 完全 独立 于 语言 的 文本 格式 , 但 是 也 使 用 了 类 似 于 C 
语言 家 族 的 习惯 (包括 C、C++、C#、Java、JavaScript、Perl 和 Python 等 ) 。 这 些 特性 使 JSON 
成 为 理想 的 数据 交换 语言 。JSON 比 XML 更 小 、 更 快 、 更 易 解 析 。 
JSON 建构 于 两 种 结构 : 
(1) “名 称 / 值 ”对 的 集合 。 在 不 同 的 语言 中 ， 它 被 理解 为 对 象 、 记 录 、 结 构 、 字 典 、 
哈 希 表 、 有 键 列表 或 者 关联 数组 。 
(2) 值 的 有 序列 表 。 在 大 部 分 语言 中 ， 它 被 理解 为 数组 。 
JSON 举例 如 下 : 


"firstName": "John", 
"lastName": "Smith", 
"sex": "third", 
"age": 25, 
"address": 
1 
"streetAddress": "21 2nd Street", 
"city": "New York", 
"state": "NY™", 
"postalCode": "10021" 


上 
"phoneNumber": 
[ 
{ 
"type": "home", 
"number": "212 555-1234" 
上 
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{ 
"type": "fax", 
"number": "646 555-4567" 


} 


按照 这 种 模式 ，GeoJSON 利用 JSON 来 存储 矢量 地 理 要 素 ， 只 是 对 各 名 称 做 了 规范 。 
GeoJSON 支持 点 、 线 、 面 、 多 点 、 多 线 、 多 面 和 几何 集合 等 几何 类 型 。GeoJSON 里 的 要 素 包 
含 一 个 几何 对 象 和 其 他 属性 ， 要 素 集合 表示 一 系列 要 素 。 

可 以 将 GeoJSON 保存 为 .js 文件 ， 这 样 便 可 以 在 Web GIS 中 直接 引用 。 此 外 ， 当 前 主流 
的 Web 服务 通常 的 响应 也 是 GeoJSON 格式 。 

TopoJSON 是 GeoJSON 简化 后 的 版 本 。TopoJSON 与 GeoJSON 相 比 ， 文 件 大 小 缩小 了 
80%， 这 是 因为 : 


e 边界 线 只 记录 一 次 ( 例如 对 于 中 国 广西 省 和 广东 省 的 交界 线 只 记录 一 次 ) 

。 不 使 用 浮 点 数 ， 只 使 用 整数 。 

因此 将 GeoJSON 转换 为 TopoJSON 数据 , 对 于 解决 因 文件 过 大 而 造成 的 读 取 速 度 过 慢 是 
相当 简单 、 有 效 的 。 不 过 当前 TopoJSON 还 只 在 D3js 中 有 比较 广泛 的 使 用 ,还 不 是 世界 范围 
内 认可 的 格式 。 


3.1.1.4 其 他 文本 文件 


其 他 矢量 数据 文件 的 格式 还 有 .gpx、 包 含 空间 坐标 信息 的 .csv 等 。 

GPX (GPS eXchange Format，GPS 交换 格式 ) 是 一 个 XML 格式 ， 为 应 用 软件 设计 的 通 
用 GPS 数据 格式 。 它 可 以 用 来 描述 路 点 、 轨 迹 、 路 程 。 这 个 格式 是 免费 的 ， 可 以 在 不 需要 付 
任何 许可 费用 的 前 提 下 使 用 。 它 的 标签 保存 位 置 、 海 拔 和 时 间 ， 可 以 用 来 在 不 同 的 GPS 设备 
和 软件 之 间 交 换 数据 。 如 查看 轨迹 、 在 照片 的 exif 数据 中 嵌入 地 理 数 据 。 

在 GPX 中, 一 个 没有 顺序 关系 的 点 集合 叫 作 路 点 。 一 个 有 顺序 的 点 的 集合 叫 作 轨 迹 或 者 
路 程 。 轨 迹 是 一 个 人 曾经 走 过 的 记录 ， 路 程 是 建议 的 下 一 步 要 走 的 地 方 。 所 以 一 般 来 讲 ， 轨 
迹 里 的 点 包含 时 间 信息 ， 路 程 里 的 点 没有 时 间 信 息 。 

最 小 的 一 个 GPX 文件 ， 仅 仅 包 含 一 个 经 纬度 坐标 的 点 ， 其 他 的 都 是 可 选 的 。 

CSV〈Comma-Separated Values， 喜 号 分 隔 值 ) 文件 以 纯 文本 形式 存储 表格 数据 (数字 和 
文本 ) ， 纯 文本 意味 着 该 文件 是 一 个 字符 序列 。CSYV 文件 由 任意 数目 的 记录 组 成 ， 记 录 间 以 
某 种 换行 符 分 隔 ; 每 条 记录 由 字段 组 成 ， 字 段 间 的 分 隔 符 是 其 他 字符 或 字符 串 ， 最 常见 的 是 
逗号 或 制 表 符 。 通 常 ， 所 有 记录 都 有 完全 相同 的 字段 序列 。 第 一 条 记录 可 以 是 字段 名 。 
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3.1.1.5” 栅 格 格式 


大 多 数 栅 格 数据 格式 都 是 开放 的 ， 包 括 JPEG、PNG、TIFF、BMP 等 。 过 去 GIF 曾 使 用 
了 专利 压缩 格式 ， 但 在 2003 年 6 月 过 期 了 。 

此 外 ， 切 片 地 图 以 及 WMS 等 Web 服务 返回 的 也 都 是 栅 格 格式 的 图 片 。KML/KMZ 文件 
也 能 包含 栅 格 数据 。 


3.1.2 ”基于 空间 数据 库 的 数据 


当 数 据 集 越 来 越 多 并 越 来 越 复杂 时 ， 最 好 将 数据 存储 在 数据 库 中 。 这 通常 使 得 更 容易 运 
行 高 级 查询 、 建 立 关 系数 据 集 ， 并 管理 编辑 的 数据 。 数 据 库 也 可 以 提高 性 能 ， 并 引入 执行 空 
间 操 作 工 具 。 

商业 的 数据 库 包 括 微软 的 SQL Server、Oracle Spatial 以 及 ArcSDE 中 间 件 。 通 过 ArcSDE 
中 间 件 ， 可 以 连接 包括 FOSS 数据 库 在 内 的 多 种 数据 库 。 最 为 常用 的 FOSS 数据 库 有 PostGIS 
与 SpatiaLite 等 ， 下 面 分 别 介绍 这 两 个 数据 库 。 


3.1.2.1 PostGIS 


PostGIS 是 一 个 开源 程序 ， 它 为 关系 型 数据 库 PostgreSQL 提供 了 存储 空间 地 理 数据 的 支 
持 ， 使 PostgreSQL 成 为 了 一 个 空间 数据 库 ， 能 够 进行 空间 数据 管理 、 数 量 测量 与 几何 拓扑 分 
析 。PostGIS 实现 了 OGC 所 提供 的 简单 要 素 的 SQL 实现 参考 。 

PostGIS 实现 了 一 个 基于 轻 量 级 的 几何 体 实现 ， 并 提供 了 完善 的 索引 ， 这 大 大 减少 了 硬盘 
与 内 存 的 存储 量 。 轻 量 级 的 几何 体 实现 使 服务 器 能 够 把 磁盘 中 更 加 大 量 的 数据 载 入 到 内 存 之 
中 ， 这 大 大 提高 了 查询 的 性 能 。 

PostGIS 已 经 注册 成 为 了 OGC 的 简单 要 素 的 SQL 标准 的 其 中 一 种 实现 。 然 而 由 于 某 些 原 
因 , OGC 并 未 把 PostGIS 列 为 一 种 “兼容 ”的 实现 。 其 原因 包括 PostGIS 扩展 了 WKB 与 WKT 
格式 来 存储 带 有 三 维 或 四 维 坐标 的 几何 体 ， 该 扩展 并 不 符合 OGC 的 最 新 定义 。 

在 Windows 平台 下 ,PostGIS 提供 了 一 个 pgAdminII 的 插件 ,该 插件 能 够 把 ESRI Shapefile 
格式 的 地 理 数据 导入 PostGIS 数据 库 之 中 。 

大 多 数 FOSS GIS 软件 都 提供 了 连接 PostGIS 数据 库 的 接口 ， 例 如 QGIS、uDig 以 及 
GeoServer 等 。 常 用 商业 GIS 软件 也 都 有 接口 ， 例 如 ArcGIS、MapInfo 等 。 


3.1.2.2 SpatiaLite 


SpatiaLite 是 一 套 具 有 空间 数据 功能 的 SQLite 数据 库 系 统 。 

正如 其 名 称 所 显示 的 ，SQLite 是 一 种 轻 量 级 的 数据 库 引擎 。 但 是 SQLite 并 没有 使 用 “ 客 
户 端 /服务 器 ”结构 ， 也 并 不 需要 安装 关系 数据 库 管 理 系统 ,因此 SQLite 数据 库 可 以 非常 容易 
复制 ， 并 运行 在 各 种 类 型 的 设备 上 。 因 此 ，SpatiaLite 非常 类 似 ESRI 产品 中 的 文件 地 理 数据 
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库 〈File Geodatabase) 。 而 且 相 对 MySQL、PostgreSQL 这 两 款 开源 的 世界 著名 数据 库 管 理 系 
统 来 讲 ， 它 的 处 理 速度 比 它 们 都 快 。 

SpatiaLite 实现 了 OGC 所 提供 的 简单 要 素 的 SQL 实现 参考 。 虽 然 SQLite 本 身 也 具备 R 
树 索引 以 及 几何 类 型 ， 但 是 要 进行 高 级 的 空间 查询 以 及 支持 多 种 地 图 投影 ， 则 必须 使 用 
SpatiaLite。SpatiaLite 提供 了 一 软件 库 以 及 几 个 实用 工具 。 这 些 工具 包括 命令 行 工具 (在 SQLite 
中 加 入 了 空间 宏 ) 、 一 个 操作 数据 的 图 形 化 界面 以 及 一 个 用 于 浏览 的 数据 简单 桌面 GIS 工具 。 

由 于 只 是 一 个 二 进 制 的 文件 ， 因 此 SpatiaLite 常用 来 作为 交换 空间 数据 的 矢量 格式 。 

SpatiaLite 虽然 现在 还 不 如 PostGIS 成 熟 ， 但 是 也 越 来 越 得 到 更 广泛 使 用 。QGIS 也 能 连 
接 SpatiaLite。 


3.2 ”Web GIS 中 的 数据 层 


在 第 2 章 中 ， 介 绍 了 在 Web GIS 应 用 中 包含 一 个 数据 层 。 该 层 可 以 很 简单 ， 就 是 存储 在 
计算 机 中 某 个 文件 夹 下 的 几 个 Shapefile 文件 ， 也 可 以 是 包含 几 台 企业 级 服务 器 的 很 复杂 的 生 
态 系 统 ， 既 包含 独立 文件 ， 也 包含 关系 数据 库 。 

数据 层 存储 了 Web GIS 使 用 的 数据 集 。 几 乎 可 以 肯定 的 是 ， 其 中 包含 专题 图 。 如 果 决 定 
创建 自己 的 底 图 与 切片 集 ， 那 么 该 层 还 包含 了 底 图 图 层 数 据 。 不 过 ， 也 可 使 用 其 他 GIS 服务 
器 的 底 图 或 一 些 专题 图 层 ， 以 免 维 护 与 更 新 数据 。 

- 些 单位 或 组 织 出 于 安全 与 性 能 的 考虑 , 不 会 将 每 天 都 在 编辑 与 更 新 的 数据 放 到 网 络 上 。 
如 果 允 许 网 络 地 图 用 户 修改 数据 库 ， 必 须 考虑 避免 数据 被 删除 、 损 坏 或 破坏 。 同 时 ， 也 不 希 
望 由 于 外 部 用 户 的 大 量 使 用 而 导致 自己 内 部 GIS 用 户 的 响应 变 慢 ， 反 之 亦 然 。 

出 于 这 些 考虑 ， 因 此 通常 复制 一 份 数据 库 专 门 用 于 互联 网 应 用 。 如 果 这 些 要 素数 据 不 需 
要 让 终端 用 户 编辑 ， 那 么 该 复制 的 数据 库 就 是 只 读 的 。 如 果 需 要 让 用 户 编辑 ， 那 么 则 需要 使 
用 自动 脚本 或 Web 服务 让 两 个 数据 库 同步 。 


3.2.1 服务 器 的 选择 


通常 可 以 通过 最 大 限度 地 减少 存储 数据 的 服务 器 与 最 终 用 户 之 间 的 中 转 站 数量 ， 来 增加 
网 站 地 图 的 性 能 。 如 果 数据 是 文件 形式 或 简单 的 数据 库 ， 那 么 可 以 将 数据 直接 存储 在 GIS 服 
务 器 上 ， 而 不 需要 再 使 用 单独 的 数据 库 服务 器 ， 这 样 便 减少 了 GIS 服务 器 与 数据 库 服 务 器 之 
间 的 网 络 传输 。 但 是 ， 当 数据 量 非常 大 的 时 候 ， 或 使 用 数据 库 的 用 户 数量 很 多 时 ， 最 好 将 数 
据 库 单独 安装 在 独立 的 服务 器 上 。 这 样 便 可 以 更 加 专注 备份 流程 和 元 余 存储 机 制 ， 防 止 数据 
丢失 和 损坏 。 也 有 助 于 许多 并 发 用 户 访问 时 ， 防 止 数 据 库 和 服务 器 资源 的 竞争 。 

当 将 数据 单独 存储 在 数据 库 服务 器 上 时 ， 确 保 防火 墙 不 会 阻止 机 器 间 在 所 有 必要 端口 之 
间 的 通信 。 这 可 能 需要 涉及 咨询 IT 部 门 的 员工 。 同 时 还 需要 确保 运行 Web 服务 的 进程 被 允 
许 从 其 他 计算 机 中 读 取 数据 。 此 外 ， 不 能 使 用 像 “C:\Data\China ”这 种 本 地 路 径 来 访问 数据 
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集 ， 而 是 需要 使 用 共享 文件 夹 的 网 络 名 称 ， 例 如 “\DataServer\data\Japan”。 
3.2.2 ”文件 与 数据 库 方式 的 选择 


当 设 计数 据 层 时 ， 需 要 确定 是 将 数据 存储 为 一 系列 的 简单 文件 ， 例 如 Shapefile 或 KML 
等 ; 还 是 存储 到 支持 空间 数据 的 数据 库 中 ， 例 如 PostGIS 或 SpatiaLite。 文 件 存 储 方 式 适用 于 
那些 不 经 常 变换 的 ， 而 且 数 据 量 相对 比较 小 的 数据 集 。 文 件 方式 存储 数据 当然 要 比 数据 库存 
储 简 单 许多 ， 而 且 便 于 在 用 户 与 计算 机 之 间 迁 移 和 共享 。 

如 果 需 要 存储 大 量 的 数据 ， 或 者 数据 需要 被 不 同 的 部 门 经 常 编辑 ， 或 需要 维护 关系 表 来 
链接 数据 集 ， 那 么 使 用 数据 库 方式 更 合适 。 数 据 库 可 以 提供 强大 的 SQL 查询 以 及 计算 空间 关 
系 〈 例 如 相交 、 包 含 等 ) 。 

如 果 已 经 有 安装 在 数据 库 中 的 长 期 运行 的 GIS 项 目 ， 现 在 需要 将 其 发 布 到 网 络 ， 那 么 就 
需要 针对 上 述 利 疯 来 权衡 是 否 保留 数据 库 或 提取 数据 并 将 其 复制 到 基于 文件 的 数据 集中 。 


3.2.3 ”开放 数据 格式 与 专 有 格式 的 选择 


在 前 面 的 内 容 中 已经 介绍 了 开放 的 数据 格式 ， 例 如 Shapefile、KML、JPEG 等 ， 并 介绍 
了 各 自 优 劣 。 开 放 数 据 格式 所 对 应 的 是 专 有 数据 格式 ， 是 由 特定 的 软件 供应 商 创建 的 ， 没 有 
公开 的 文档 说 明 ,或 不 能 由 任何 其 他 开发 人 员 创 建 或 扩展 。ESRI 的 文件 地 理 数据 库 就 是 一 种 
典型 的 专 有 格式 。 虽然 最 近 ESRI 提供 了 用 于 创建 文件 地 理 数 据 库 的 API, 但 是 不 能 扩展 或 还 
原 其 底层 格式 。 
- 些 更 广泛 应 用 的 开放 数据 格式 实际 上 也 是 由 商业 软件 厂商 设计 的 ， 因 为 某 些 原因 ， 他 
们 决定 将 格式 开放 。 两 个 典型 例子 是 ESRI 的 Shapefile 与 Adobe 的 PDF 。 虽 然 将 数据 格式 开 
放 可 能 会 引入 FOSS 同类 软件 的 竞争 ， 但 是 同时 也 增强 了 其 商业 软件 的 互 操 作 性 。 并 且 ， 如 
果 数 据 格式 得 到 广泛 地 采用 与 推广 ， 必 然 会 增强 供应 商 在 软件 社区 的 影响 力 和 公信 力 。 


3.3 ”处 理 空间 数据 的 开源 工具 


空间 数据 的 采集 、 处 理 是 建立 Web GIS 的 第 一 步 。 在 大 多 数 情 况 下 ， 收 集 到 的 基础 空间 
数据 都 不 可 能 完全 满足 需要 , 这 时 需要 对 这 些 数据 进行 必要 的 处 理 。 例 如 , 根据 DEM 创建 坡 
度 、 坡 向 、 坡 度 分 带 等 ; 空间 插值 、 投 影 变 换 等 。 实 际 上 ， 在 将 数据 集成 到 Web GIS 中 之 前 ， 
对 于 大 部 分 的 数据 都 需要 进行 一 定 类 型 的 处 理 。 

下 面 简单 介绍 几 个 本 书 实践 过 程 中 会 用 到 的 数据 处 理 开 源 软件 与 工具 。 
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3.3.1 QGIS 


QGIS 提供 了 很 多 常用 的 矢量 和 栅 格 处 理工 具 。 此 外 ， 还 有 很 多 开发 者 在 QGIS 用 户 社区 
贡献 的 插件 ， 可 以 扩展 QGIS 功能 。 

打开 OGIS 软件 ， 在 “矢量 ”菜单 中 包含 了 许多 菜单 项 用 于 处 理 矢 量 数据 ， 包 括 合并 、 
缓冲 和 裁剪 等 ， 如 图 3.1 所 示 。 


Txt 转 Shp 工 具 0) 
ors » 
开放 街道 图 (0) 
空间 音调 (S) 
路 径 图 
拓扑 结构 检查 器 (1) ， 
撕 取 坐标 (C) 
二 分 析 I 具 (A) 
小 研究 I 具 (R) »| 
ED convex rus).. 
@ IJ) » 
| Bi 
站 拓 芝 理 T 具 O) ， | Buffer 人 
Te Inered. 
| 四 union- 
上 @@ Symetrical Difference... 
号 Clip… 
[bY Difference-. 
办 Dissove.. 


路 Eliminate Sliver Polygons... 
3.1 QGIS 中 的 矢量 数据 处 理 功能 
此 外 ， 另 一 些 强大 的 功能 隐藏 在 了 矢量 图 层 的 “另存 为 ”右键 菜单 中 。 通 过 “矢量 图 层 


另存 为 ”对 话 框 ， 可 以 在 不 同 的 格式 间 进 行 转换 ， 例 如 将 Shapefile 转换 为 GeoJSON， 还 可 以 
进行 投影 转换 等 ， 如 图 3.2 所 示 。 


阳 矢量 图 层 另存 为. 
格式 GeoJSON - 
另存 为 浏览 
坐标 多 照 系 ” 选 择 举 标 钴 照 系 加 
编码 Syztem 一 
站 


跌 过 属性 闻 尘 
有 吧 将 已 保存 的 文件 添加 到 地 图 中 
导出 符号 无 符号 a 
HMR [Er | 
PD Eetent (current: 图 层 ) 
国 Layer Options 


Custon Options 


图 3.2 通过 “另存 为 ”实现 格式 与 投影 的 转换 
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在 QGIS 中 的 “ 栅 格 ”菜单 内 包含 了 许多 处 理 栅 格 数据 的 功能 ， 包 括 插值 、 等 高 线 、 地 
形 分 析 、 分 区 统计 等 。 

如 果 在 QGIS 中 没有 找到 某 处 理 功 能 ， 那 么 这 时 可 使 用 其 他 开发 人 员 开 发 的 插件 。QGIS 
在 安装 时 也 已 经 安装 了 一 些 有 用 的 插件 。 选 择 “ 插 件 ” 菜 单 中 的 “管理 并 安装 插件 ”菜单 项 ， 
切换 到 “已 安装 ”面板 便 可 查看 已 安装 的 插件 。 在 该 面板 中 还 可 以 务 载 某 些 不 需要 的 插件 。 

如 果 想 增加 某 些 插件 ， 可 先 在 该 对 话 框 的 “全 部 ”面板 中 选择 某 插 件 ， 查 看 其 介绍 ， 如 
图 3.3 所 示 ， 如 果 正 是 所 需要 的 ， 单 击 “ 安 装 插件 ”按钮 即 可 。 


阳 插件 | 全 部 (257) ’ En 


OGR2Layers 


Export OGR layers to OpenLayers HTML 


全 13 rating vote(s), 28835 忆 下 载 


+ _ | | 款 芝 :vedtornwebopenlayers 
更 多 信息 ; 主页 这 喧 织 code reposiory 


作者 : Nicolas BOzON, Rene-Luc DHONT, Michael DOUCHIN, Luca 
DELUCCHI 


可 用 入: 二: 0.9.0 (位 于 QGIS 宫 方 括 件 库 》 


-| 区 EE LE 四 
本 人 安装 括 件 
关闭 着 助 


图 3.3 查看 并 安装 插件 
3.3.2 GDAL 与 OGR 工 具 


虽然 大 多 空间 数据 处 理 函 数 使 用 了 最 主流 的 算法 ， 而 且 这 些 算法 大 多 都 有 详细 的 描述 文 
档 ， 但 是 如 果 每 个 开源 软件 的 开发 人 员 对 这 些 相 同 的 操作 都 从 头 编码 ， 那 么 必然 会 导致 大 量 
额外 的 烦琐 工作 ， 并 且 可 能 会 引入 错误 与 不 一 致 。 因 此 许多 GIS 开源 软件 就 充分 使 用 GDAL 

(Geospatial Data Abstraction Library) 这 一 开源 的 代码 库 ， 来 执行 最 常见 的 功能 。 

GDAL 是 一 个 在 X/MIT 许可 协议 下 的 开源 栅 格 空间 数据 转换 库 。 它 利用 抽象 数据 横 型 来 
表达 所 支持 的 各 种 文件 格式 。 它 还 有 一 系列 命令 行 工 具 来 进行 数据 转换 和 处 理 .OGR 是 GDAL 
项 目的 一 个 分 支 ， 功 能 与 GDAL 类 似 ， 只 不 过 它 提供 对 矢量 数据 的 支持 。 有 很 多 著名 的 GIS 
类 产品 都 使 用 了 GDAL/OGR 库 ， 包 括 ESRI 的 ArgGIS、Google Earth、GRASS GIS 和 QGIS 

使 用 GDAL 与 OGR 大 致 有 3 种 途径 , 一 种 是 直接 使 用 QGIS 等 图 形 界面 的 软件 ; 第 二 种 
是 使 用 Python、C#、Java 等 开发 语言 调用 库 中 的 函数 ;复杂 性 与 灵活 性 居于 上 述 两 者 之 间 的 
是 第 三 种 ， 就 是 使 用 命令 行 工具 来 调用 。 当 安装 QGIS 时 ， 同 时 安装 了 这 些 工 具 。 在 本 章 的 
实践 部 分 会 介绍 其 中 一 些 工具 的 使 用 方法 。 

此 外 ， 还 有 许多 其 他 FOSS 工具 用 于 处 理 空间 数据 ， 而 且 还 会 不 时 涌现 出 新 的 工具 。 
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3.4 实践 3: 使 用 QGIS 裁剪 与 投影 变换 矢量 数据 


本 实践 将 首先 介绍 如 何 使 用 QGIS 来 裁剪 并 投影 变换 矢量 数据 ， 然 后 介绍 如 何 使 用 OGR 
命令 行 的 功能 实现 同样 的 目的 。 使 用 命令 行 的 好 处 就 是 可 以 对 整个 文件 夹 下 所 有 的 文件 进行 
循环 处 理 。 

本 实践 使 用 的 数据 位 于 下 载 文件 的 “Data\PhiladelphiaBaseLayers” 文 件 夹 中 ， 数 据 属于 
美国 宾夕法尼亚 州 东南 部 港口 城市 费城 。 数 据 主要 是 从 OpenStreetMap 中 下 载 并 提取 的 。 


3.4.1 使 用 QGIS 裁剪 数据 并 转换 投影 


(1) 将 数据 复制 到 一 个 简单 的 文件 夹 下 , 我 们 假设 为 “C:\Data\PhiladelphiaBaseLayers”。 
(2) 了 解 原始 数据 。 
在 PhiladelphiaBaseLayers 文件 夹 中 存放 了 一 大 堆 Shapefile 文件 , 还 有 3 个 用 于 练习 的 文 
件 夹 ， 分 别 是 clipFeature、clipped 与 clippedAndProjected 。 
数据 集 使 用 的 是 地 理 坐 标 系 统 ， 覆 盖 范 围 是 费城 。 本 实践 的 任务 是 将 数据 裁剪 到 费城 城 
市 边界 范围 之 内 ， 然 后 将 它们 投影 到 当前 主流 的 在 线 的 Web 地 图 使 用 的 Web 墨 卡 托 投影 坐 
标 系 统 中 。 
Google 地 图 于 2005 年 首先 使 用 了 Web 墨 卡 托 投 影 ， 但 是 最 初 没 有 得 到 欧洲 石油 测绘 组 
(European Petroleum Survey Group， 简 写 为 EPSG) 的 认可 ， 所 以 没有 正式 的 空间 引用 标识 
符 (Spatial Reference Identifier，SRID) ， 只 有 一 个 非 正 式 代码 ， 即 900913。 在 2008 年 ，EPSG 
提供 了 一 正式 的 标识 (EPSG:3785) 与 正式 的 名 称 (Popular Visualization CRS / Mercator) ， 
同年 晚 些 时 候 , EPSG 将 其 标识 更 新 为 EPSG:3857, 名 称 更 新 为 “WGS 84 / Pseudo-Mercator”。 
其 他 标识 符 还 有 ESRI:102113、ESRI:102100、OpenLayers:900913 与 OSGEO:41001 等 ， 其 中 
ESRI:102113 对 应 EPSG:3785， 而 ESRI:102100 对 应 EPSG:3857。 当 前 几乎 所 有 的 主要 在 线 
地 图 ， 包 括 Google 地 图 、 必 应 地 图 、MapQuest、MapBox 与 OpenStreetMap 等 ， 都 采用 该 投 
(3) 裁剪 矢量 数据 。 
打开 QGIS， 加 入 fuel.shp 与 clipFeature/city_limits.shp 两 个 图 层 。 然 后 选择 “矢量 > 地 理 
处 理工 具 >Clip” 菜 单项 ， 打 开 “ 裁 前 ”对 话 框 。 将 “输入 矢量 图 层 ” 设 置 为 fhel，“ 裁 前 网 
层 ” 为 city_limits, 并 将 “输出 shape 文件 ”设置 为 clipped 子 文件 夹 的 fuel.shp 文件 ， 如 图 3.4 
所 示 。 
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输出 shape 文 估 


mtviilsidniiaessaLwyesyalimdyRda [ 济 扣 | 
名 结果 添加 到 视图 中 


日 有 
图 3.4 裁剪 矢量 图 层 设置 对 话 框 
然后 单 击 “ 确 定 ” 按 钮 ， 执 行 裁剪 操作 。 裁 剪 完成 后 ，QGIS 自动 将 裁剪 后 的 图 层 加 入 到 


地 图 中 ， 可 以 看 到 新 图 层 只 包含 着 费城 边界 范围 之 内 的 要 素 。 
(4) 投影 变换 。 


在 图 层 控制 器 中 ， 单 击 右键 以 选择 裁剪 后 的 fuel 图 层 ， 然 后 选择 “另存 为 ”菜单 项 ， 打 
开 “ 矢 量 图 层 另存 为 ”对 话 框 ， 确 保 输出 格式 设置 为 ESRI Shapefile 文件 ， 将 “另存 为 ”设置 
为 clippedAndProjected 子 文件 夹 下 的 fuel.shp。 

单 击 “ 坐 标 参照 系 ” 旁 的 “更 改 ”按钮 ， 打 开 “ 坐 标 参照 系 选择 器 ”对 话 框 ， 在 “过 滤 ” 
文本 框 中 输入 “pseudo”, 在 “世界 坐标 参照 系 ” 中 列 出 了 过 滤 后 的 结果 , 选择 “WGS 84 / Pseudo 
Mercator”， 如 图 3.5 所 示 。 


站 坐标 参照 系 选择 器 国 >] 


为 矢量 文件 选择 坐标 关照 系 。 获 据点 将 从 图 层 从 标 关照 系 中 转换 。 


选择 举 标 参照 系 : 。 wGS 84 /Pseudo Mercator 


+projmmere +a=6378137 +b=6378137 #1at_ts=0.0 #1on 0-0.0 +x_0-0.0 
+0-0 #1.0 tunits™m tnaderids=enull twktext tno_defs 


到 | 珊 
图 3.5 选择 坐标 参照 系 
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选择 了 坐标 系统 后 ， 单 击 “ 确 定 ” 按 钮 返回 到 “矢量 图 层 另 存 为 ”对 话 框 中 ， 再 次 单 击 
“确定 ”按钮 。 这 次 QGIS 没有 将 另存 后 的 数据 加 入 到 当前 地 图 中 ， 要 核实 是 否 按照 要 求 进 
行 了 坐标 转换 ， 最 好 是 从 新 地 图 中 加 入 该 数据 。 

在 QGIS 中 新 建 一 个 项 目 ， 在 地 图 中 加 入 clippedAndProjected/fuel.shp。 显 示 效 果 如 图 3.6 
所 示 。 


Ed QGIS 2.6.1-Brighton - ° EI 
项 目 (BD 编 罗 人 E) 视图) 图 导 (L) 设置 (8) 插件 (E) 矢 里 人 0) 顶 格 避 ) 数据 库 (0) 网络 他 Treeessing 部 助 (0) 
D 电 和 目 BR 鸭 O®% PASRPDAA: > 
上 少 加 当 嘿 原 屁 痉 ml he DB We Be EA 喝 > 
隐 6 
| a 
Cy a 
a 县 
09 
8 4a 
a 
多 a 
网 二: 0 1976003 比例 RR 1.319, 405 


图 3.6 确认 投影 转换 成 功 


与 ArcMap 一 样 , 在 QGIS 中 , 第 一 个 加 入 地 图 的 图 层 决 定 整个 地 图 的 投影 。 注意 在 QGIS 
窗口 的 右 下 角 显 示 了 EPSG 的 代码 为 3857， 证 明 数 据 确实 经 过 了 投影 。 以 后 加 入 的 图 层 也 都 
会 使 用 该 投影 来 显示 。 


3.4.2 ”使 用 OGR 命令 行 工具 裁剪 与 投影 变换 数据 


上 述 操 作 很 简单 。 但 是 如 果 一 次 处 理 几 十 个 或 上 百 个 图 层 ， 那 么 这 种 方法 既 麻烦 ， 又 耗 
时 ， 且 容易 引起 错误 。 对 于 这 类 情况 ， 可 以 使 用 OGR 的 命令 行 工 具 来 实现 。 

在 安装 QGIS 时 , 也 一 同安 装 了 运行 GDAL 与 OGR 功能 的 命令 行 工 具 , 而 且 在 桌面 还 有 

-个 快捷 方式 ， 即 OSGeo4W。 

(1) 运行 OSGeo4W。 

在 桌面 上 双击 OSGeo4W 快捷 方式 ， 如 果 没 有 该 快捷 方式 ， 可 选择 “开始 > 所 有 程序 
>QGIS>OSGeo4W”， 打 开 一 个 空 的 命令 行 窗口 。 

(2) 裁剪 数据 。 

我 们 需要 使 用 ogr2ogr 工具 来 实现 裁剪 与 投影 变换 。 虽 然 OGR 可 以 用 一 个 命令 同时 完成 
裁剪 与 投影 变换 工作 ， 但 是 在 其 执行 过 程 中 先 执行 投影 变换 。 对 于 本 实践 ， 由 于 原始 数据 履 
盖 范 围 大 得 多 ， 所 以 先 裁剪 再 投影 要 更 合适 。 

在 “www.gdal.org/ogr2ogr.html” 网 页 详细 介绍 了 ogr2ogr 的 使 用 。 在 使 用 该 工具 时 ， 首 
先 提 供 一 些 可 选 参数 ， 然 后 再 提供 一 些 必 选 参数 。 第 一 个 必 选 参数 是 输出 数据 集 的 名 称 ， 第 
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二 个 必 选 参数 是 输入 数据 集 的 名 称 。 

在 控制 台 窗 口中 输入 并 执行 如 下 命令 : 

ogr2ogr-skipfailures-clipsrc c:\data\PhiladelphiaBaseLayers\clipFeature\city_limits.shp c:\data\ 
PhiladelphiaBaseLayers\clipped\roads.shp c:\data\PhiladelphiaBaseLayers\roads.shp 

由 于 道路 数据 非常 多 ， 因 此 需要 稍 等 片刻 。 完 成 之 后 ， 在 QGIS 中 重新 创建 一 项 目 ， 将 
该 clipped\roads.shp 数据 加 入 到 地 图 中 ， 确 保 所 有 的 道路 要 素 在 费城 城市 范围 线 之 内 。 

仔细 查看 上 述 命令 中 的 参数 ， 其 中 包含 了 两 个 可 选 参数 ， 一 个 是 -skipfailures， 这 对 于 
OpenStreetMap 数据 很 有 用 ， 因 为 可 能 存在 一 些 奇 怪 的 拓扑 。 第 二 个 可 选 参数 是 -clipsrc， 代 表 
裁 前 要素。 最 后 两 个 参数 分 别 代表 输入 与 输出 数据 集 。 

(3) 投影 变换 。 
在 控制 台 窗口 中 输入 并 执行 如 下 命令 : 


ogr2ogr -t_srs EPSG:3857 -s_srs EPSG:4326 c:\data\PhiladelphiaBaseLayers\clippedAndProjected\roads.shp 
ci\data\PhiladelphiaBaseLayers\clipped\roads.shp 


等 命令 执行 完成 之 后 ， 在 QGIS 中 重新 创建 一 项 目 ， 将 该 clippedAndProjected \roads.shp 
数据 加 入 到 地 图 中 。 可 发 现 比 投影 前 的 数据 在 垂直 方向 拉 伸 了 一 些 。 

在 上 述 命令 行 中 ，-s_srs 参数 指定 源 数据 集 的 坐标 系统 〈(EPSG:4326， 即 WGS 1984 地 理 
坐标 系统 ) ，-t_srs 参数 指定 目标 坐标 系统 (EPSG:3857， 即 Web 黑 卡 托 投影 ) 。 最 后 两 个 参 
数 同样 分 别 代表 输入 与 输出 数据 集 。 

如 果 不 清 楚 源 数据 所 使 用 的 投影 及 其 对 应 的 标识 符 ， 可 以 在 QGIS 中 新 建 一 个 项 目 ， 将 
数据 加 入 到 地 图 中 , 在 QGIS 窗口 的 右 下 角 便 可 显示 其 标识 符 ， 如 图 3.6 所 示 。 如 果 不 清楚 目 
标 投影 的 标识 符 ， 那 么 可 以 在 QGIS 中 使 用 “另存 为 ”菜单 项 来 查看 。 

(4) 使 用 循环 命令 。 

通过 上 面 的 操作 ， 可 以 看 到 ogr2ogr 非常 方便 。 其 实 更 实用 的 是 其 自动 功能 。 

删除 PhiladelphiaBaseLayers 文件 夹 中 clipped 与 clippedAndProjected 两 个 子 文件 夹 中 的 所 
有 文件 。 

在 OSGeo4W 控制 台 窗 口中 输入 如 下 命令 ,切换 操作 路 径 : 

cd ci\data\PhiladelphiaBaseLayers 

输入 如 下 命令 ， 对 所 有 该 文件 夹 中 所 有 的 数据 进行 裁剪: 

for %X in (*.shp) do ogr2ogr -skipfailures -clipsrc c¢:\data\PhiladelphiaBaseLayers\clipFeature\city_limits.shp 
ci\data\PhiladelphiaBaseLayers\clipped\%X cxvdata\PhiladelphiaBaseLayers\%X 

通过 控制 台 窗 口 输出 的 消息 ， 可 以 看 出 ogr2ogr 对 文件 夹 中 的 所 有 数据 集 进行 循环 处 理 。 

该 命令 与 之 前 的 命令 很 相似 ， 只 是 使 用 了 用 “%X” 表 示 的 一 个 变量 ,代替 具体 的 数据 集 
名 称 。 而 且 还 同时 使 用 了 循环 查找 文件 夹 中 所 有 的 Shapefile 并 执行 裁剪 命令 。 


在 控制 台 窗口 中 输入 如 下 命令 ， 将 操作 路 径 切换 到 clipped 文件 夹 中 : 
cd c:\data\PhiladelphiaBaseLayers\clipped 
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在 控制 台 窗口 中 输入 如 下 命令 ， 对 所 有 数据 集 进 行 投影 变换 ， 并 保存 在 clippedAndProjected 
交尾 交趾 

for %X in (*.shp) do ogr2ogr -t srs EPSG:3857 -s srs EPSG:4326 c:\data\PhiladelphiaBaseLayers\ 
clippedAndProjected\%X c:\data\PhiladelphiaBaseLayers\clipped\%X 


通过 QGIS 确保 命令 确实 得 到 正确 执行 ， 如 图 3.7 所 示 。 


Ed QGIS 2.6.1-Brighton x | 
秆 编辑 (E) ”视图 (Y) ”图 层 (L) 设置 (5) 插件 (E) 矢量 (0) 楼 格 (8) 数据 库 (D) 网 络 (人 ”Prosessing 帮助 人 0 


ed 4 折 品 | 周记 避风 DDA* BQ" 回 * 


ve 和 对 多 四” 上。 


-8358964, 4915134 比例 尺 1:409,661 ”> 庙堂 染 EPs6:3857 |@| [人 4 


图 3.7 ”经 过 裁剪 与 投影 变换 的 所 有 数据 


3.4.3 ”在 批 处 理 中 运行 OGR 功能 


国 
二 
草 


如 果 在 将 来 还 需要 进行 同样 的 操作 ， 那 么 可 以 将 命令 放置 在 批 处 理 文件 中 。 批 处 理 文件 
就 是 扩展 名 为 .bat 的 文本 文件 。 
使 用 任意 一 种 文本 编辑 器 ， 在 其 中 输入 如 下 内 容 : 


cd /d C:\Data\PhiladelphiaBaseLayers 

set ogr20grPath="c:\program files\QGIS Brighton\bin\ogr20gr.exe" 

for %%X in (*.shp) do a -skipfailures -clipsrc D:\DataExamples\PhiladelphiaBaseLayers\ 
clipFeature\city limits.shp D\DataExa aBaseLayersclipped\ 0%X DADataExamplesPhiladelphiaBaseLayers%%6X 

for %%X in (*.shp) do Oe -skipfailures -s srs EPSG:4326 -t_srs EPSG:3857 
D:\DataExamples\PhiladelphiaBaseLayers\clippedAndProjected\%%X 
D:\DataExamples\PhiladelphiaBaseLayers\clipped\%%X 


如 果 读 者 没有 完全 按照 本 书 设置 数据 目录 或 QGIS 的 安装 目录 ， 那 么 需要 按照 读者 的 实 
际 情况 修改 上 述 命令 中 的 路 径 。 
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将 文件 保存 为 clipAndProjectbat。 然 后 在 Windows 资源 管理 器 中 双击 该 文件 ， 便 可 执行 
裁剪 与 投影 变换 工作 。 


3.4.4 ”数据 整合 


在 后 面 的 内 容 中 需要 使 用 到 裁剪 与 投影 变换 后 的 数据 ， 因 此 还 需要 执行 如 下 一 些 操作 来 
准备 这 些 数据 。 

(1) 在 “C:Data” 目 录 创 建 Philadelphia 文件 夹 。 该 文件 夹 用 于 存放 将 来 要 使 用 的 数据 。 

(2) 将 下 载 文件 “Data\PhiladelphiaBaseLayers\clippedAndProjected” 文 件 夹 中 的 所 有 数 
据 复制 到 Philadelphia 文件 夹 中 。 

(3) 按照 “3.4.1 使 用 QGIS 裁剪 与 投影 变换 矢量 数据 ”中 介绍 的 方法 ， 将 下 载 文件 
“Data\PhiladelphiaBaseLayers\clipFeature” 文 件 夹 中 的 city_limits.shp 数据 另存 到 Philadelphia 
文件 夹 中 ， 并 将 其 投影 设置 为 “WGS 84/Pseudo Mercator”。 


3.5 ”实践 4: 使 用 QGIS 处 理 栅 格 数据 


在 这 里 通过 将 费城 30 米 分 辨 率 的 数字 高 程 模 型 数据 (Digital Elevation Model，DEM) 处 
理 为 地 形 底 图 ,来 介绍 如 何在 QGIS 中 处 理 栅 格 数据 .一 个 美观 的 地 形 底 图 不 仅 需 要 包括 DEM 
数据 ， 而 且 需 要 山体 阴影 、 坡 面 等 图 层 的 衬托 。 

DEM 数据 来 自 美国 地 质 调查 局 ， 位 于 本 书 下 载 文件 的 “Data\PhiladelphiaElevation ”文件 
夹 中 ， 名 为 dem.tif， 将 其 复制 到 “C:\Data\PhiladelphiaElevation ”文件 夹 中 。 该 数据 已 经 裁剪 
到 费城 城市 范围 之 内 ， 也 投影 到 了 EPSG:3857 坐标 系统 中 。 

(1) 派生 山体 阴影 图 层 。 

打开 QGIS， 将 dem.tif 加 入 到 当前 地 图 中 。 

在 图 层 管理 器 中 选中 dem， 然 后 选择 栅 格 菜单 中 Terrain Analysis 的 Hillshade 菜单 项 ， 打 
开 “ 山 体 阴影 ”对 话 框 ， 将 输出 图 层 格式 设置 为 GeoTIFF， 名 称 设置 为 hillshade， 其 他 使 用 
默认 选项 ， 如 图 3.8 所 示 。 


加 山体 阴影 | 
高 和 三 a 
输出 国 层 ttion/hillshad， 
输出 格式 [esi j > 
竖 寺 因子 ( 委 直 寺 张 系数 ) 1.0 
x 结果 添加 到 项目 中 

昭 度 

方位 前 《水 平角 度 ) 300.00 5 

生计 角度 40.00 二 
确定 取消 


图 3.8 “山体 阴影 ”对 话 框 
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对 于 那些 喜欢 使 用 命令 行 工 具 的 读者 ， 也 可 以 使 用 gdaldem hillshade 命令 来 提取 山体 阴 
影 。 

(2) 派生 坡度 图 层 。 

在 图 层 管理 器 中 选中 dem, 然后 选择 栅 格 菜单 中 Terrain Analysis 的 坡度 菜单 项 , 打开 “ 坡 
度 ” 对 话 框 , 将 输出 图 层 格式 设置 为 GeoTIFF, 名 称 设 置 为 slope, 其 他 使 用 默认 选项 ,在 slope 
图 层 中 ， 每 个 单元 格 的 值 为 0-90， 显 示 该 单元 格 的 坡度 。 

(3) 为 坡度 图 层 配色 。 
在 PhiladelphiaElevation 文件 夹 中 新 建 一 个 名 为 sloperamp.txt 的 文本 文件 ， 其 内 容 如 下 : 


0255 255 255 
90000 


在 每 行 中 的 第 一 个 数值 代表 栅 格 数据 中 单元 格 的 值 ， 后 3 个 数值 分 别 代表 颜色 的 R、G、 
B 这 3 个 分 量 。 

这 是 一 非常 简单 的 色 带 ， 当 将 slope 图 层 设 置 使 用 该 色 带 后 ， 将 显示 为 一 灰 度 颜色 渐变 ， 
坡度 值 越 靠 近 0， 颜 色 越 淡 ， 坡 度 值 越 靠 近 90， 颜 色 越 深 。 当 与 山体 阴影 联合 使 用 时 ， 在 地 
图 中 就 会 突出 显示 山体 的 骨架 与 悬崖 。 

打开 OSGeo4W 命令 行 窗 口 ， 使 用 cd 命令 将 工作 路 径 切换 到 PhiliadelphiaElevation 文件 
夹 。 然 后 输入 并 执行 如 下 命令 ， 将 slope 图 层 设置 使 用 sloperamp.txt 指定 的 色 带 : 

gdaldem color-relief slope.tif sloperamp.txt slopeshade.tif 

在 上 面 的 命令 行 中 ， 使 用 了 gdaldem 工具 ， 该 工具 用 于 分 析 与 处 理 高 程 数 据 。 其 中 ， 为 
栅 格 配色 的 color-relief 命令 需要 3 个 参数 ， 按 顺序 分 别 是 输入 栅 格 数据 名 称 、 定 义 色 带 的 文 
本 文件 名 称 以 及 删除 文件 名 称 。 

将 color-relief 命令 输出 slopeshade.tif 加 入 到 QGIS 地 图 中 ， 显 示 效 果 如 图 3.9 所 示 。 


图 3.9 配色 后 的 坡度 图 
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由 于 大 部 分 区 域 地 势 起 伏 低 ， 所 以 坡度 值 靠近 0 的 栅 格 单元 非常 多 ， 因 此 配色 后 的 坡度 

图 大 部 分 区 域 为 白色 ， 而 这 也 正 是 我 们 要 达到 的 效果 。 
(4) 为 高 程 图 层 配色 。 

在 PhiladelphiaElevation 文件 夹 中 创建 一 个 名 为 demramp.txt 的 文本 文件 ， 内 容 如 下 : 

04615488 

100 251 255 128 

1000 224 108 31 

2000 200 55 55 

3000 215 244 244 


使 用 上 述 色 带 后 的 高 程 数 据 ， 费 城 在 地 势 较 低 的 地 方 显示 为 绿色 ， 在 山地 显示 为 黄色 。 
在 OSGeo4W 命令 行 窗口 中 ， 输 入 并 执行 如 下 命令 : 


gdaldem color-relief dem .tif demramp.txt demcolor.tif 
将 配色 后 的 demcolor.tif 加 入 到 QGIS 地 图 中 ， 显 示 效 果 如 图 3.10 所 示 。 


图 3.10 配色 后 的 高 程 图 


由 于 上 述 命令 将 那些 没有 值 的 单元 格 也 设置 了 值 ， 因 此 需要 重新 进行 裁剪 工作 。 

选择 “ 栅 格 ”菜单 中 “提取 ”的 Clipper 菜单 项 ， 打 开 “ 裁 剪 器 ”对 话 框 ， 按 照 图 3.11 
所 示 设 置 参数 。 注意 掩 膜 图 层 要 使 用 下 载 文件 “Data\PhiladelphiaBaseLayers\clipFeature” 文 件 
夹 中 的 city_limits.shp 多 边 形 数据 。 
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四 入 本 吕 团 > | 
输入 机 格 文 件 (I) | dencolor =] .| 
输出 文件 @) levation/dencolorclipped tif | 选择 
区 无 数据 值 (8) 0 S| 

形 罗 模式 一 一 一 一 一 一 一 一 
® 二 撞 颜 图 层 
挤 腊 图 层 blinits. shp |v| | 选择 
口 b 慎 一 个 移出 lphs 波 段 
| 
区 完成 后 载 入 到 视图 中 () 
| aaavarp -dstnodata 0 a -eatline 四 | 
C: /Dat Dh ature/city linits. 
op_to_cutline -of GTifl 
| emotARila dhi en ert Taaoalor tif 
| | C:/Dat/Philadelphi Elevation/denoolorclipped ti 
_ 克 诈 |]| 关 站 |]| 半 助 


图 3.11 ”使 用 裁剪 器 裁剪 栅 格 图 层 


在 “裁剪 器 ”对 话 框 下 面 的 文本 框 中 ， 显 示 了 对 应 的 gdalwarp 命令 。 

(5) 地 图 综合 设置 。 

在 QGIS 中 新 建 一 个 项 目 。 在 地 图 中 加 入 裁剪 后 的 彩色 的 DEM， 即 demcolorclipped.tif。 
然后 加 入 山体 阴影 数据 ， 即 hillshade.tif， 将 其 透明 度 设置 为 “60%”。 加 入 slopeshade.tif 数 
据 ， 也 将 其 透明 度 设置 为 “60%”。 最 后 得 到 图 3.12 所 示 的 地 图 。 


图 3.12 彩色 地 形 图 


将 hillshade.tif、slopeshade.tif 与 demcolortif 这 3 个 文件 复制 到 “C:\Data\Philadelphia” 文 
件 夹 中 ， 在 后 面 的 内 容 中 会 使 用 到 这 些 数据 。 
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3.6 ”实践 5，PostGIS 的 安装 与 初步 使 用 


本 实践 将 介绍 如 何 使 用 PostGIS, 将 空间 数据 存储 到 空间 数据 库 中 ， 而 不 再 以 文件 的 方式 
存储 。 


3.6.1 安装 PostGIS 


在 安装 PostGIS 前 首先 必须 安装 PostgreSQL， 然 后 在 安装 好 的 Stack Builder 中 选择 安装 
PostGIS 组 件 。 
(1) 下 载 安装 程序 。 
PostgreSQL 安装 文件 下 载 地 址 是 “http://www.postgresql.org/download/windows/”。 编 写 
本 书 时 ， 使 用 的 PostgreSQL 版 本 是 9.4.1， 所 带 的 PostGIS 版 本 是 2.1。 读 者 也 可 以 直接 使 用 
本 书 下 载 文件 Tools 文件 夹 中 的 postgresql-9.4.1-1-windows.exe。 
(2) 安装 PostgreSQL。 
双击 下 载 的 文件 ， 所 有 设置 都 使 用 默认 设置 即 可 ， 只 是 需要 设置 超级 用 户 名 postgres 的 
密码 。 作 为 练习 可 以 使 用 简单 的 密码 , 例如 本 书 为 了 统一 也 将 密码 设置 为 postgres。 在 真实 环 
境 中 ， 请 注意 使 用 安全 性 高 的 密码 。 
(3) 安装 PostGIS。 
PostgreSQL 安装 完成 后 ， 提 示 运 行 Stack Builder。 通 过 该 工具 安装 PostGIS。 
Stack Builder 运行 后 , 选择 安装 目标 软件 为 PostgreSQL 9.4 on port 5432。 然后 在 安装 程序 
选择 对 话 框 中 选择 PostGIS 2.1， 如 图 3.13 所 示 。 
Stack Builder 3.1.1 [x 
请 选择 您 想 要 安装 的 应 用 程序 。 


S-> 类 别 
由 各 Add-ons, tooks and utities 


Sp> Regstration-requred and tral products 
D> Repkcation Sn ns 
下 

的 区 


a Web Dev 


PostGIS "spataly enables” the postgreSQL server, alowng t to be 。 ^ 
used as 3 backend spatal database for geographic nformation systems 


< 返回 (8) | 下 一 个 0) > | | 取消 (C) 


图 3.13 选择 PostGIS 2.1 作为 安装 程序 


然后 Stack Builder 会 下载 PostGIS 2.1 的 安装 程序 。 下载 后 就 会 安装 , 在 设置 安装 组 件 时 ， 
最 好 选择 “Create spatial database”， 以 便 在 创建 数据 库 时 可 以 以 此 作为 模板 ， 如 图 3.14 所 示 。 
对 于 其 他 步骤 的 设置 都 选择 默认 值 即 可 。 
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@ postGIS 2.1.5, PgRouting 2.0for PostgreSQLx32.. ~ © 
. Choose Components 
wR @ ose wthfeatresofPostgrs 2.15, Pepouing 20for 
PostyresQ. x329.3 you wont to nstal 


Chedk the components you want to instal and undhedk the components you don't want to 
instal. Cick Next to continue. 


Select components to nstal; [加 Postcis onan 
Create spatial an 


Space requred: 102. INE 


< Back Mext > Cancdl 


图 3.14 ”安装 组 件 选择 
3.6.2 ”创建 空间 数据 库 


要 创建 与 管理 PostGIS 空间 数据 库 , 可 使 用 PostgreSQL 提供 的 命令 行 或 名 为 pgAdmin III 
的 图 形 化 管理 工具 ， 此 外 像 QGIS 等 GIS 客户 端 软件 也 提供 了 管理 插件 。 这 里 介绍 如 何 使 用 
pgAdmin II 来 完成 创建 空间 数据 库 以 及 在 数据 库 中 导入 空间 数据 。 

(1) 打开 pgAdmin III。 

打开 位 于 “开始 > 所 有 程序 >PostgreSQL 9.4” 之 中 的 pgAdmin II。 

(2) 登录 到 服务 器 。 

打开 pgAdmin II 之后， 发 现 该 程序 已 经 将 本 地 安装 的 PostgreSQL 数据 库 服 务 器 列 在 了 
服务 器 列表 中 ， 将 其 选中 然后 选择 右键 菜单 的 “连接 ”命令 ， 以 超级 用 户 postgres 及 安装 过 
程 为 该 用 户 设置 的 密码 连接 数据 库 服务 器 。 连 接 以 后 ， 将 列 出 该 服务 器 中 包含 的 内 容 ， 如 图 
3.15 所 示 ， 包 含 数据 库 、 表 空间 和 组 角色 等 。 


时 pgAdmin - “= 匡 哥 
文件 日 ”将 强 (E) 笑 件 (P) 视 天 VV) 工具 中 其 动 H) 


1 人 9 司 吧 回 | 局 国 国 刀 晒 :| 时 


9 涟 吕 (1) 
-BO PostgresQL 9.4 (locahost:5432) 


组 角色 (0) 
四 部- 登录 角色 (1) 


< 
正在 著 取 教 据 库 的 详细 信息 postgs_21_sample.… 完成 。 0.00 秒 


图 3.15 数据 库 服务 器 内 容 
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(3) 创建 空间 数据 库 。 

选中 数据 库 服务 器 内 容 中 的 数据 库 ， 然 后 选择 其 右键 菜单 中 的 “新 建 数据 库 ” 命 令 ， 打 
开 “ 新 建 数据 库 ” 对 话 框 。 首 先 在 “属性 ”面板 中 设置 数据 库 名 称 ， 因 为 本 书 将 使 用 加 拿 大 
温哥华 市 的 数据 ， 因 此 将 数据 库 名 称 设置 为 “Vancouver”; 并 将 所 有 者 设置 为 “postgres”。 
然后 ， 切 换 到 “定义 ”面板 中 ， 将 模板 设置 为 “ “postgis : 21 sample” 。 设 置 如 图 3.16 所 示 。 


加 新 半数 据 库 … [x je ”新建 数 据 库 .. L x 
[天寿 定义 | 实时 | 权限 安全 于 答 | 5QL 属性 “(定义 | 实时 | 权限 | 安全 标签 |SQL 
各。 Vancouver SUT 
op 模版 postgs_21_sample 
所 有 者 postres v 志 衬 间 [二 本 
字 季 排序 
字 和 人 类 
连接 娄 限制 【 工 
注 和 
了 R 制 
部 助 [DO |] | NO 屠 助 [确定 (0) | | 到 汪 (0) 


3.16 创建 空间 数据 库 的 “属性 ”与 “定义 ”面板 设置 
3.6.3 ”导入 空间 数据 


经 过 前 面 的 步 又， 已 经 建 好 了 功能 完善 的 但 还 没有 空间 数据 的 空间 数据 库 ， 接 下 来 的 工 
作 是 将 空间 数据 导入 到 刚 建立 的 数据 库 中 ,而 最 简单 的 方式 是 导入 Shapefile 格式 了 空间 数据 。 
PostGIS 提供 了 “PostGIS Shapefile Import/Export Manger” 图 形 化 界面 工具 来 帮助 完成 Shapefile 
空间 数据 的 导入 与 导出 。 
(1) 获取 数据 。 
本 实践 使 用 的 数据 位 于 下 载 文件 的 “Data\Vancouver” 文 件 夹 中 ， 名 为 Vancouver.shp。 
(2) 确定 空间 数据 的 投影 系统 。 
在 使 用 PostGIS Shapefile Import/Export Manger 工具 导入 空间 数据 时 ， 需 要 明确 设置 空间 
数据 的 SRID， 即 空间 引用 标识 符 。 
要 确定 空间 数据 的 SRID， 有 好 几 种 方式 。 一 种 是 利用 “3.4 实践 3: 使 用 QGIS 工具 裁剪 
与 投影 变换 矢量 数据 ”介绍 的 利用 QGIS 来 确定 。 另 一 种 是 利用 pgAdmin II 来 确定 。 
在 “Data\Vancouver” 文 件 夹 中 有 一 个 名 为 Vancouver.prj 的 文本 文件 。.prj 文件 指定 了 数 
据 的 投影 。 用 文本 文件 工具 打开 该 文件 ， 可 见 如 下 一 些 文本 : 


PROJCS["NAD 1983 UTM Zone 10N",GEOGCS["GCS North American_ 1983"DATUM[ 
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在 pgAdmin II 中 ， 打 开 查询 工具 ， 在 SQL 编辑 器 中 输入 如 下 SQL 语句 : 


Select srid, srtext proj4text from spatial ref sys where srtext ILIKE '%NAD83 / UTM zone 10N%' 


查询 结果 如 图 3.17 所 示 ， 得 知 该 空间 数据 的 SRID 为 26910。 
司 Query - vancouver 在 postgres@localho.，- = 医 台 
文件 日 ”六 句 (E) 。 坦 询 (Q) ”收藏 夫 (0) ” 快 建 键 (M) 视图 W) 帮助 (HH) 
芒 目 | 虽 凡 多 OIMAN|I PIPBNEn|le 


以 前 的 吉庆 v| RN* | 刚 $1W 有 


select srid, artext, projtext From apatial ref_sys 
where srtext ILIKE '#NADS3 / UT™ zone 10N#" | 


< > 
Unx 行 2, 列 46, 字符 100 1 行 。 


3.17 利用 查询 工具 确定 空间 数据 的 SRID 


(3) 导入 空间 数据 。 
打开 位 于 “开始 > 所 有 程序 >PostGIS 2.1 bundle for PostgresSQL” 之 中 的 PostGIS Shapefile 
Import/Export Manger。 
首先 单 击 “View connection details” 按 钮 ， 打 开 “PostGIS connection” 对 话 框 ， 输 入 用 户 
名 “postgres” 及 其 对 应 的 密码 ， 设 置 连接 的 数据 库 为 Vancouver， 如 图 3.18 所 示 。 
© PostGIS connection = 口 x 


PostGIS Connection 


Username: postgres 
Password: essee0e 
Server Host: ©& localhost 5432 


Database: 。 Vancouvel 


OK 


图 3.18 连接 PostGIS 数据 库 服务 器 


连接 数据 库 之 后 ， 单 击 “Add file” 按 钮 ， 加 入 Vancouver.shp 文件 ， 并 将 其 SRID 设置 为 
“26910”， 如 图 3.19 所 示 。 这 一 步 绝对 不 能 省 略 ， 否 则 不 能 正确 导入 数据 。 
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© PostGIS Shapefile ImporVEqport Manager - -EN 
PouGls Comnecion 
View commecion da 
iron rpon 
tmpor tin 
Shapehie Som Table eo Cob SKID Mode Rom 


CAData\WoncowrerYencouershp pubie vancouer geom EEE creome 


Jad Tie 

Opsons— Import abo Concel 
Log Wndon 
Connectig howslocaihor pons5$437 weerspomgres pasmeords mm dbname Vencower 
Cnmeegion seereded 


图 3.19 导入 空间 数据 

最 后 单 击 “Import” 按 钮 导入 数据 。 

可 以 在 pgAdmin III 中 通过 查看 Vancouver 数据 库 在 “架构 ”的 public 数据 表 中 是 否 增加 
了 Vancouver 来 判断 数据 是 否 成 功 导入 。 

(4) 查看 导入 的 空间 数据 。 

PostGIS 并 没有 提供 工具 以 地 图 的 方式 查看 空间 数据 ,不 过 我 们 可 以 使 用 QGIS 等 客户 端 
GIS 软件 来 查看 。 

打开 QGIS， 在 窗口 左边 的 “浏览 器 ”中 选择 PostGIS， 然 后 选择 其 右键 菜单 中 的 “新 建 
连接 ”命令 ， 打 开 “ 创 建 一 个 新 的 PostGIS 连接 ”对 话 框 ， 按 图 3.20 设置 参数 ， 最 后 单 击 “ 确 
定 ” 按 钮 连接 数据 库 。 


| 
连接 信息 


瑚 区 连接 (IT) 


Only show layers in the layer registries 
| “ 避 不 剖析 天 限 人 入 段 类型 (几何 字段，cpaTREY) 
只 查找 “公共 ”模式 


CE] 剖 | 击 


图 3.20 在 QGIS 中 建立 与 PostGIS 数据 库 服 务 器 的 连接 
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建立 连接 以 后 ， 便 可 以 在 “浏览 器 ”中 列 出 数据 库 服 务 器 中 所 有 的 空间 图 层 ， 如 图 3.21 
所 示 ， 选 中 某 图 层 ， 将 其 拖 入 图 层 控制 器 中 便 可 在 地 图 中 打开 该 空间 数据 。 
元 EE Ee 
人 怒 四 1 里 回 


4 一 
JES9L 


国 oracle 
日 - 蔚 Postors 
日 < Yancouver 


日 - 目 publie 


目 tiger 二 
UP SpatiaLite 了 


图 3.21 在 QGIS 中 列 出 空间 数据 库 中 的 所 有 图 层 
3.7 习 题 


(1) GADL 与 OGR 工具 的 进一步 学 习 。 

访问 GDAL 工具 (www.gdal.org/gdal_utilities.html) 与 OGR 工具 (www.gdal.org/ogr_ 
utilities.html) 介绍 页 面 ， 进 一 步 学 习 它们 的 使 用 方法 。 

(2) 研究 如 何 将 栅 格 数据 导入 到 PostGIS 数据 库 中 。 

(3) 从 互联 网 上 寻找 一 些 感 兴趣 的 数据 ， 这 些 数据 必须 包括 基础 底 图 与 专题 图 层 。 下 载 
这 些 数据 ， 将 其 转换 为 开源 软件 能 识别 的 格式 ， 并 将 其 投影 系统 转换 为 EPSG:3857。 
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使 用 WMS 在 服务 器 端 
绘制 与 查询 地 图 


从 本 章 可 以 学 习 到 : 

加 动态 绘制 地 图 服务 

WMS 规范 基础 

加 WMS 的 样式 与 符号 

池 使 用 GeoServer 发 布 WMS 服务 
加 高 级 符号 与 图 层 组 


第 4 章 使 用 WMS 在 服务 器 端 绘制 与 查询 地 图 = 


在 前 面 的 内 容 中 ， 主 要 介绍 如 何 使 用 QGIS 操作 本 地 计算 机 上 的 数据 。 本 章 将 会 通过 
GeoServer 将 地 图 图 层 发 布 为 Web 服务 ， 跨 入 Web 世界 。 

本 章 将 着 重 介绍 开放 地 理 空间 联盟 制定 的 WMS 规范 。 在 FOSS 领域 , GIS 专业 人 员 一 直 
使 用 WMS 来 绘制 Web 地 图 。 虽 然 WMS 并 没有 使 用 最 新 的 技术 ， 但 是 却 是 一 个 被 广泛 使 用 
并 实用 的 规范 ,是 Web GIS 的 基础 .本 章 还 将 通过 实践 的 方式 , 一步 一 步 地 介绍 如 何 结合 QGIS 
与 GeoServer， 以 及 如 何 发 布 带 高 级 符号 的 WMS 服务 。 


4.1 动态 绘制 地 图 服务 


可 使 用 多 种 方法 在 网 页 浏览 器 中 显示 地 图 。 一 种 是 将 服务 器 中 事先 绘制 好 的 地 图 图 像 ( 即 
地 图 切片 》， 发 送 给 浏览 器 ; 第 二 种 是 从 服务 器 上 返回 一 串 代 表 空 间 图 形 与 属性 的 文本 ， 在 
浏览 器 端 绘制 ; 第 三 种 是 在 服务 器 端 根据 请 求 的 内 容 绘制 一 个 地 图 图 像 ， 然 后 返回 给 客户 端 。 
而 后 者 正 是 本 章 要 介绍 的 方式 。 因 为 每 次 都 是 根据 用 户 请 求 参数 ， 随 时 绘制 地 图 ， 图 像 反 映 
数据 的 最 新 情况 ， 因 此 该 方式 通常 称 为 动态 地 图 服务 。 而 切片 地 图 方式 只 反映 了 生成 地 图 切 
片 时 的 数据 状况 。 


4.1.1 动态 绘制 地 图 的 优点 


由 于 动态 地 图 服务 是 在 请 求 时 访问 数据 并 绘制 的 ， 因 此 对 于 要 显示 数据 最 新 状态 的 需求 
最 为 有 用 。 对 于 在 同一 时 间 改 变 位 置 的 地 理 要 素 ( 例 如 要 绘制 一 个 大 型 车 队 中 各 车 辆 的 位 置 )， 
使 用 动态 地 图 服务 方式 来 绘制 是 最 佳 的 选择 。 此 外 ， 对 于 那些 使 用 切片 地 图 来 说 难以 生成 切 
片 、 难 以 存储 或 维护 的 大 范围 地 图 ， 动 态 地 图 也 是 最 佳 的 解决 方案 。 

通过 WMS 来 动态 绘制 地 图 时 可 以 使 用 许多 符号 , 还 可 以 使 用 样式 化 图 层 描述 符 (Styled 
Layer Descriptors ，SLD) 。 如 果 喜 欢 使 用 QGIS 来 制图 ， 那 么 还 可 使 用 其 输出 SLD， 并 将 其 
导入 到 GeoServer 中 ， 这 样 便 可 以 让 互联 网 的 用 户 也 可 在 客户 端 GIS 中 使 用 同样 的 样式 。 此 
外 ， 在 服务 器 上 绘制 地 图 可 以 使 用 很 复杂 的 符号 ， 通 常 在 网 页 浏览 器 中 直接 绘图 只 能 使 用 简 
单 的 符号 。 


4.1.2 动态 绘制 地 图 的 缺点 


等 待 服务 器 来 绘制 地 图 是 一 个 缓慢 痛苦 的 经 历 ， 尤 其 是 有 许多 层 要 泻 染 时 。 对 于 桌面 应 
用 ，2~3 秒 钟 的 等 待 时 间 被 认为 是 可 接受 ,但 对 于 “刁钻 ”的 互联 网 地 图 用 户 来 说 ， 就 不 可 
接受 了 ， 因 为 他 们 既 不 是 GIS 相关 专业 ， 也 不 懂 后 端 技术 。 现 在 ， 人 们 期 待 每 一 个 地 图 应 用 
像 谷 歌 地 图 的 响应 速度 一 样 ， 而 这 不 使 用 地 图 切片 是 难以 实现 的 。 

如 果 某 一 个 Web GIS 有 许多 用 户 同时 请 求 地 图 ， 那 么 动态 地 图 服务 便 容易 超 负 荷 运行 。 
而 这 就 导致 了 两 难 境地 : 你 希望 地 图 有 用 ， 但 如 果 服 务 器 使 用 的 技术 是 不 可 扩展 的 话 ， 用 户 
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越 多 ， 响 应 越 慢 。 

如 果 知道 只 有 有 限 的 用 户 访问 地 图 应 用 ， 例 如 企业 内 部 使 用 的 Web GIS， 使 用 动态 绘图 
服务 能 满足 用 户 体验 要 求 ， 那 么 也 可 以 不 使 用 地 图 切片 ， 从 而 节省 了 生成 与 维护 地 图 切片 的 
工作 。 


4.1.3 动态 绘制 地 图 的 相关 服务 器 软件 


本 书 将 详细 介绍 如 何 使 用 GeoServer 来 发 布 WMS 提供 动态 地 图 服务 。 其 他 自由 和 开源 的 
提供 动态 地 图 服务 的 服务 器 软件 主要 包括 如 下 所 列 。 

(1) QGIS Server (hub.qgis.org/projects/quantum-gis/wiki/QGIS_Server_tutorial ) ， 利 用 与 
QGIS 桌面 环境 相同 的 函数 库 为 用 户 提供 WMS 网 络 地 图 服务 。 只 需要 简单 地 将 地 图 或 模板 
的 工程 文件 复制 至 服务 器 系统 的 目录 下 ， 用 户 就 能 实现 桌面 环境 工作 成 果 的 WMS 发 布 。 其 
输出 的 结果 与 桌面 环境 下 得 到 的 完全 一 致 。QGIS Server 服务 器 通常 在 Apache 服务 器 环境 下 
以 CGIFastCGI 组 件 运行 。 

(2) MapServer (mapserver.org) ， 由 美国 明尼苏达 大 学 开发 ， 软 件 建立 在 其 他 主流 开源 
或 免费 系统 ， 如 Shapelib、FreeType、Proj.4、libTIFF、Perl 等 之 上 。 最 初 它 的 开发 由 NASA 
支持 ， 以 使 其 卫星 图 像 开 放 给 公众 。 

(3) deegree (deegree.org) ， 是 一 个 基于 Java 的 充分 实现 了 OGCI/ISO 标准 的 空间 Web 
服务 软件 ， 由 德国 在 2000 年 初 开 始 开 发 。 

其 他 商业 GIS 服务 器 软件 有 ESRI 的 ArcGIS Server 以 及 我 国 超 图 公司 的 SuperMap Server 
等 。 虽 然 ArcGIS Server 发 布 的 空间 Web 服务 有 它 自己 的 格式 ， 但 是 在 发 布地 图 服务 时 ， 也 
同时 支持 使 用 WMS 规范 的 方式 访问 该 服务 。 


4.2 WMS 规范 基础 


在 第 1 章 中 介绍 了 Web 服务 接受 用 户 请 求 ， 然 后 返回 一 个 响应 。 为 了 保证 Web 服务 的 
跨 平台 性 ， 那 么 请 求 与 响应 的 语法 需要 保证 一 致 ， 而 且 应 该 有 一 个 专门 的 开放 规范 文档 加 以 
说 明 。 当 软件 开发 人 员 创 建 支持 该 Web 服务 的 服务 器 或 客户 端 程序 时 ， 为 了 确保 Web 服务 
能 够 正确 工作 ， 他 们 将 严格 遵循 规范 文档 。 

开放 地 理 空间 联盟 的 Web 地 图 服务 (WMS) 规范 是 一 种 在 互联 网 上 提供 和 使 用 动态 地 
图 时 需 遵守 的 国际 规范 。 到 目前 为 止 ， 已 发 布 了 4 个 版 本 的 WMS 规范。 这 些 版 本 是 v1.0.0、 
V1.1.0、v1.1.1 和 v1.3.0( 最 新 版 本 ) 。 最 新 版 本 WMS 规范 下 载 地 址 为 portal.opengeospatial.org/ 
files/?artifact_ id=14416。 请 读者 用 几 分 钟 的 时 间 浏 览 一 下 该 文档 ， 了 解 规范 的 基本 结构 ， 重 点 
注意 第 7 部 分 。 

由 于 规范 需要 描述 Web 服务 的 每 个 方法 及 其 参数 ， 因 此 规范 文档 一 般 都 会 比较 长 而 且 比 
较 复杂 。 不 过 幸运 的 是 ， 我 们 并 不 需要 直接 使 用 规范 ， 通 常 是 调用 那些 用 户 友好 的 服务 器 与 
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客户 端 程序 , 它们 屏蔽 了 Web 服务 的 复杂 性 。 例 如 ,假设 需要 使 用 GeoServer 创建 一 个 WMS 
服务 并 在 QGIS 的 地 图 中 显示 该 服务 , 那么 并 不 需要 我 们 去 参考 WMS 规范 , 而 是 直接 使 用 这 
些 程序 提供 的 封装 好 的 功能 。 不 过 可 以 确定 的 是 ，GeoServer 和 QGIS 的 开发 人 员 编 写 自己 的 
源 代码 时 必须 详细 阅读 WMS 规范 。 

WMS 服务 主要 支持 以 下 操作 : 

(1) 请 求 服务 的 元 数据 (GetCapabilities〉; 

(2) 请 求 地 图 图 像 (GetMap) 

(3) 请 求 关于 地 图 要 素 的 信息 〈GetFeatureInfo， 可 选 ) 。 

作为 基本 WMS 服务 ， 必 须 至 少 支持 GetCapabilities 和 GetMap 操作 ， 如 果 作 为 可 查询 
WMS， 则 需要 支持 可 选 的 GetFeatureInfo 操作 。 对 于 样式 化 图 层 描 述 符 WMS 服务 ， 还 有 两 
种 可 选 的 操作 ， 一 个 是 请 求 图 例 符号 操作 ， 即 GetLegendGraphic; 第 二 个 是 请 求 用 户 定义 的 
样式 操作 ， 即 GetStyles。 


4.2.1 使 用 GetCapabilities 操作 请 求 服务 元 数据 


GetCapabilities 操作 返回 服务 的 元 数据 。 根据 该 服务 的 元 数据 来 确定 该 服务 支持 哪些 其 他 
操作 。 例 如 在 浏览 器 地 址 栏 中 输入 如 下 地 址 : 

http://eusoils.jre.ec.europa.eu/wrb/wms_Threats.asp?&SERVICE=WMS&REQUEST=GetCap 
abilities 

那么 该 地 址 就 使 用 GetCapabilities 操作 访问 欧洲 土壤 数据 中 心 WMS 服务 的 元 数据 ,其 中 
http://eusoils.jre.ec.europa.eu/wrb/wms_Threats.asp 是 请 求 的 路 径 , 后 面 是 参数 。 其 中 REQUEST 
=GetCapabilities 表示 请 求 的 是 GetCapabilities 操作 ，SERVICE =WMS 表示 服务 是 WMS， 这 
些 都 是 OGC 规范 中 明确 要 求 的 。 

上 面 的 地 址 返回 或 打开 一 个 XML 格式 的 文件 ,内 容 如 下 (为 了 节省 篇 幅 ， 删 减 了 一 些 重 
复 与 不 重要 的 内 容 ) : 


<WMS Capabilities version="1.3.0"> 
<Service> 
<Name>WMS</Name> 
<Title>Soil Threats</Title> 
<Abstract>Soil threats, organic Carbon Decline, Soil Erosion, Compaction, Salinization, pH </Abstract> 
<KeywordList> 
<Keyword>European soil data</Keyword> 
<Keyword> map viewer</Keyword> 
<Keyword> soil threats</Keyword> 
</KeywordList> 
<OnlineResource xlink:href="http://eusoils.jrc.ec.europa.eu/ WRB/WMS _threats.asp?"/> 
<MaxWidth>2048</MaxWidth> 
<MaxHeight>2048</MaxHeight> 
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<CRS>EPSG:3035</CRS> 
<CRS>EPSG:4326</CRS> 
<EX_ GeographicBoundingBox> 
<westBoundLongitude>-28.7561</westBoundLongitude> 
<eastBoundLongitude>46.2978</eastBoundLongitude> 
<southBoundLatitude>34.1372</southBoundLatitude> 
<northBoundLatitude>68.1225</northBoundLatitude> 
</EX_GeographicBoundingBox> 
<BoundingBox CRS="EPSG:3035" minx="1.47e+006” miny="2.48837e+006" maxx="Se+006" 
maxy="6.01163e+006"/> 
<Layer queryable="1" opaque="0" cascaded="0"> 
<Name>OCTOP80</Name> 
<Title>Organic carbon content</Title> 
<KeywordList> 
<Keyword>Organic Carbon </Keyword> 
<Keyword> Soil </Keyword> 
<Keyword> soil organic matter</Keyword> 
</KeywordList> 
<CRS>EPSG:4326</CRS> 
<CRS>EPSG:3035</CRS> 
<EX GeographicBoundingBox> 
<westBoundLongitude>-41.9108</westBoundLongitude> 
<eastBoundLongitude>58.1997</eastBoundLongitude> 
<southBoundLatitude>32.2238</southBoundLatitude> 
<northBoundLatitude>71.7535</northBoundLatitude> 
</EX_GeographicBoundingBox> 
<BoundingBox CRS="EPSG:4326" minx="32.2238" miny="-41.9108” maxx="71.7535" 
maxy="58.1997" resx="1000" resy="1000"/> 
<BoundingBox CRS="EPSG:3035" minx="1.4e+006"” miny="1.98837e+006" maxx="5.4e+006" 
maxy="6.41163e+006" resx="1000" resy="1000"/> 
<Style> 
<Name>default</Name> 
<Title>default</Title> 
<LegendURL width="101" height="133"> 
<Format>image/png</Format> 
<OnlineResource xlink:type="simple" xlink:href="http://eusoils.irc.ec.europa.eu WRB/ 
WMS threats.asp?version=1.3.0&service=WMS&Arequest=GetLegendGraphic&sld version=1.1.0&layer=OCTOP8 
OQ&format=image/png&STYLE=default"/> 
</LegendURL> 
</Style> 
</Layer> 
<Layer queryable="1" opaque="0" cascaded="0"> 
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<Name>PESERA</Name> 
<Title>Soil Erosion in t/ha/yr</Title> 
</Layer> 
<Layer queryable="1" opaque="0" cascaded="0"> 
<Name>pH</Name> 
<Title>soil pH in Europe</Title> 
</Layer> 
<Layer queryable="1" opaque="0" cascaded="0"> 
<Name>Compaction</Name> 
<Title>Natural Soil Susceptibility to Compaction</Title> 
</Layer> 
<Layer queryable="1" opaque="0" cascaded="0"> 
<Name>Salinization</Name> 
<Title>Saline and Sodic Soils</Title> 
</Layer> 
</Layer> 
</Capability> 
</WMS_Capabilities> 


其 中 ，<Service> 与 </Service> 之 间 一 段 的 内 容 描述 的 是 该 服务 的 名 称 、 关 键 词 以 及 联系 信 
息 等 。 

<Capability> 与 </Capability> 之 间 描 述 了 该 服务 支持 的 操作 以 及 包含 的 图 层 。 其 中 
<Request> 与 </Request> 之 间 描 述 的 是 该 服务 支持 的 操作 ， 从 上 述 响 应 可 看 出 该 服务 支持 
GetCapabilities、GetMap〔 得 到 地 图 ) 、GetFeatureInfo 〈 得 到 地 物 属性 ) 、DescribeLayer( 描 
述 图 层 ) 、GetLegendGraphic〔 得 到 图 例 ) 与 GetStyles (得 到 样式 ) 操作 。<Layer> 与 </Layer> 
之 间 罗 列 了 该 服务 所 包含 的 所 有 图 层 数据 ， 包 括 OCTOP80、PESERA、pH、Compaction 与 
Salinization 这 5 个 图 层 。 

在 <GetMap> 与 </GetMap> 中 的 Format 列 出 了 GetMap 请 求 所 支持 的 返回 图 片 的 格式 ， 包 
括 PNG、TIFF、GIF、JPEG、WBMP 等 格式 ， 在 DCPType 中 规定 了 请 求 的 方式 ， 上 面 的 例 
子 表示 支持 HTTP 的 Get 与 Post 两 种 方式 。 根 据 该 响应 我 们 可 构造 GetMap 请 求 获取 某 图 层 
或 某 些 图 层 指定 范围 的 地 图 。 


4.2.2 ”使 用 GetMap 操作 请 求 地 图 


根据 服务 器 的 元 数据 ， 便 可 构造 GetMap 操作 获取 地 图 。 例 如 要 得 到 上 述 欧 洲 土壤 数据 
中 心 有 机 碳 含量 百分比 OCTOP80 图 层 数 据 ， 可 在 浏览 器 地 址 栏 中 输入 如 下 URL: 

http://eusoils.jrc.ec.europa.eu/wrb/wms_Threats.asp?&SERVICE=WMS&VERSION=1.3.0& 
REQUEST=GetMap&LAYERS=OCTOP80&STYLES=&CRS=EPSG:3035&BBOX=1988372,140 
0000,6411627,5400000&FORMAT=image/png& WIDTH=1200&HEIGHT=900 

该 请 求 返回 的 结果 如 图 4.1 所 示 。 
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图 4.1 使 用 GetMap 操作 请 求 地 图 


在 上 述 的 URL 中 ,SERVICE=WMS 表示 使 用 WMS 服务 ; VERSION=1.3.0 表示 使 用 1.3.0 
版 本 ; REQUEST=GetMap 表示 执行 GetMap 操作 ; LAYERS=OCTOP80 表示 请 求 图 层 为 
OCTOP80; 由 于 没有 设置 STYLE 参数 的 值 ， 所 以 表示 使 用 默认 样式 绘制 图 层 ; CRS= 
EPSG:3035 表示 使 用 坐标 参照 系统 为 EPSG:3035; BBOX=1988372,1400000,6411627,5400000 
表示 需要 绘制 的 地 图 范围 ， FORMAT=image/png 表示 返回 的 地 图 图 片 格式 为 PNG; WIDTH 
与 HEIGHT 指定 返回 图 像 的 宽 与 高 ， 单 位 为 像素 。 

当 从 WMS 请 求 地 图 时 ， 有 一 些 是 必需 的 参数 ， 必 须 提供 ， 此 外 还 有 一 些 可 选 参数 ， 如 
果 WMS 服务 的 发 布 者 实现 了 , 也 可 使 用 。 在 上 述 URL 中 所 有 的 参数 都 是 必需 的 , 必须 包含 。 
对 于 STYLE, 由 于 它 是 必 选 参数 , 因此 即使 不 设置 其 值 , 但 仍 需 包含 在 URL 中 。 可 通过 WMS 
规范 文档 (前 面 已 给 出 下 载 地 址 ) 的 7.3.2 小 节 来 查看 哪些 是 GetMap 请 求 必需 或 可 选 参 数 。 


4.2.3 ”使 用 GetFeaturelnfo 操作 请 求 地 图 要 素 信息 


GetFeatureInfo 操作 是 一 个 可 选 的 操作 。GetFeatureInfo 操作 仅仅 支持 可 查 属 性 
(queryable) 等 于 “1” 的 图 层 ， 对 于 其 他 图 层 客 户 端 不 能 发 送 GetFeatureInfo 操作 请 求 。 当 
WMS 服务 不 支持 GetFeatureInfo 操作 请 求 时 ， 会 返回 服务 异常 信息 。 
GetFeatureInfo 操作 的 主要 请 求 参数 如 表 4.1 所 示 。 


表 4.1 GetFeaturelnfo 操作 请 求 主要 参数 


请 求 参数 是 否 必需 | 描述 
VERSION=version 是 请 求 版 本 号 
REQUEST=GetFeatureInfo 是 请 求 名 称 
GetMap 请 求 参数 的 部 分 副本 。 不 包含 其 中 的 VERSION 
<map_request_copy> 是 和 REQUEST 参数 。 决 定 查询 的 目标 地 图 ， 即 在 哪个 地 图 
图 片上 查询 
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( 续 表 ) 
请 求 参数 
QUERY LAYERS=layer list 
INFO_FORMAT=output format 


描述 

待 查询 的 图 层 列表 ， 图 层 之 间 以 英文 逗号 分 隔 

要 素 信息 的 返回 格式 (MIME 类 型 ) 

要 返回 信息 的 要 素 的 数量 (默认 为 1) 。 以 (L 了 为 中 心 
点 ， 根 据 GetMap 操作 中 的 请 求 参数 BBOX、WIDTH 和 
HEIGHT 确定 初始 查找 范围 半径 , 对 指定 的 查询 图 层 进行 
查找 。 如 果 查 询 返 回 结果 小 于 用 户 指定 的 number 值 ， 将 
查找 半径 扩大 一 倍 继续 查找 , 如 果 查 询 结果 数目 满足 用 户 
要 求 返回 的 要 素数 目 ， 返回 结 果 ， 否 则 继续 扩大 半径 。 当 
查找 半径 达到 初始 搜索 半径 的 8 倍 时 , 终止 查询 , 返回 查 
询 结果 ,进入 下 一 图 层 的 查询 。 图 层 的 查询 顺序 与 待 查询 
图 层 列表 中 的 顺序 一 致 

以 像素 表示 的 要 素 X 坐标 〈 最 左 侧 为 0， 向 右 递增 ) 
以 像素 表示 的 要 素 Y 坐标 〈 最 上 侧 为 0， 向 下 递增 ) 
WMS 的 异常 错误 报告 格式 (默认 为 application/vnd. 


ogc.se_ xml) 


FEATURE COUNT=number 


I=pixel_column 


J=pixel_row 


EXCEPTIONS=exception_format 


可 以 查询 欧洲 土壤 中 心 WMS 服务 中 的 OCTO80， 但 是 由 于 它 是 栅 格 图 层 ， 因 此 不 能 返 
回 任何 有 意义 的 信息 。 这 里 给 出 一 个 GetFeatureInfo 请 求 ， 只 是 让 大 家 了 解 如 何 构造 该 请 求 ; 

http://eusoils.jrc.ec.europa.eu/wrb/wms_Threats.asp?&SERVICE=WMS&VERSION=1.3.0& 
REQUEST=GetFeatureInfo&LAYERS=OCTOP80&STYLES=&CRS=EPSG:3035&BBOX=1988 
372,1400000,6411627,5400000&FORMAT=image/png& WIDTH=1200&HEIGHT=900&QUERY 
_LAYERS=OCTOP80&INFO FORMAT=text/plain&I=600&J=700 
返回 的 响应 如 图 4.2 所 示 。 

文件 (编辑 (E) 过 看 VM) 历史 (S) 书签 B)， -~ 口 
http://eusoil...&1=6008J=700 x |+ 


| 所 图 eusoilsjrceceur Ci 县 本 罗 | 三 
| GetFeatureInfo results: 


| Layer 'OCTOP80" 
] Feature 0: 


4.2 ”利用 GetFeatureInfo 发 起 请 求 地 图 要 素 信息 
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4.3 WMS 的 样式 与 符号 


WMS 人 允许 调整 地 图 中 图 层 使 用 的 符号 。 这 是 通过 样式 化 图 层 描述 符 来 实现 的 。 一 个 样式 
化 图 层 描述 符 描述 了 符号 的 大 小 、 颜 色 和 标记 。 样 式 化 图 层 描述 符 比 较 复杂 ， 以 至 于 必须 有 
它们 自己 的 OGC 规范 文档 (www.opengeospatial.org/standards/sld) 定义 应 该 如 何 操作 它们 。 

样式 化 图 层 描述 符 可 由 服务 发 布 者 或 客户 端 来 设计 。 要 设计 一 个 真正 有 用 的 样式 化 图 层 
描述 符 ， 必 须 了 解 WMS 服务 中 的 图 层 ， 而 这 可 以 通过 可 选 的 DescribeLayer 操作 来 实现 。 

- 旦 创建 了 样式 化 图 层 描述 符 ， 有 几 种 途径 来 使 用 。 最 常用 的 是 将 其 放置 到 Web 服务 器 
中 ,然后 在 GetMap 请 求 中 将 STYLE 参数 指向 该 文件 的 URL。 另 一 种 方式 是 在 GetMap 请 求 
的 可 选 SLD_BODY 参数 中 直接 设置 对 应 的 XML 文本 。 当 然 ， 后 一 种 方式 将 导致 URL 非常 
的 长 ， 而 且 需要 大 量 的 特殊 字符 编码 或 转 义 。 

样式 化 图 层 描述 符 中 使 用 的 XML 往往 包含 许多 嵌 套 层次 而 且 比 较 复杂 。 因 此 , 从头 编 写 
样式 化 图 层 描述 符 基本 不 可 能 的 ， 也 没有 必要 。 可 使 用 一 个 样式 化 图 层 描述 符 文件 ， 在 其 基 
础 上 进行 调整 ， 以 满足 需求 。 另 外 也 可 以 使 用 QGIS, 在 窗口 环境 中 样式 化 图 层 ， 然 后 将 其 导 
出 为 样式 化 图 层 描 述 符 文 件 。 这 是 非常 有 用 的 ， 但 当前 有 一 个 很 大 的 限制 ， 那 就 是 QGIS 还 
不 支持 将 标签 信息 输出 到 样式 化 图 层 描述 符 文件 。 

本 书 将 会 分 别 介绍 上 述 两 种 方法 。 

GeoServer 中 将 数据 与 样式 信息 完全 分 开 存储 。 在 “图 层 ” 页 面 中 定义 需要 发 布 的 数据 库 ， 
在 “Styles” 页 面 中 定义 可 访问 的 样式 化 图 层 描 述 符 。 需 要 在 “编辑 图 层 ” 页 面 的 “发 布 ” 面 
板 中 设置 图 层 与 样式 的 连接 。 


4.3.1 使 用 GetStyles 操作 请 求 样式 
GetStyles 是 WMS 的 一 个 可 选 操作 。 对 于 欧洲 土壤 数据 中 心 的 WMS 服务 ， 可 使 用 如 下 
地 址 获取 样式 : 


http://eusoils.jrc.ec.europa.eu/ WRB/WMS threats.asp?version=1.3.0&service=WMS&request=GetStyles&lay 
ers=OCTOP80,PESERA 


但 是 由 于 都 是 栅 格 图 层 ， 所 以 返回 的 是 空 信息 。 
例如 对 于 如 下 GetStyles 请 求 : 


http://sampleserverl .arcgisonline.com/ArcGIS/services/Specialty/ESRI StateCityHighway USA/MapServer/ 
WMSServer?version=1.3.0&request=GetStyles&layers=0,1,2 


其 响应 将 返回 每 个 图 层 对 应 的 样式 ， 如 下 所 示 : 


<sld:StyledLayerDescriptor version="1.0.0" > 
<sld:NamedLayer> 
<sld:Name>0</sld:Name> 
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<sld:NamedStyle> 
<sld:Name>default</sld:Name> 
</sld:NamedStyle> 
</sld:NamedLayer> 


<sld:NamedLayer> 
<sld:Name>1</sld:Name> 
<sld:NamedStyle> 
<sld:Name>default</sld:Name> 
</sld:NamedStyle> 
</sld:NamedLayer> 


<sld:NamedLayer> 
<sld:Name>2</sld:Name> 
<sld:NamedStyle> 
<sld:Name>default</sld:Name> 
</sld:NamedStyle> 
</sld:NamedLayer> 
</sld:StyledLayerDescriptor> 


4.3.2 ”使 用 GetLegendGraphic 操作 请 求 图 例 


GetLegendGraphic 也 是 WMS 的 一 个 可 选 操作 ， 用 于 获取 图 例 。 例 如 对 于 欧洲 土壤 数据 
中 心 的 OCTOP80 图 层 ， 可 构造 如 下 GetLegendGraphic 操作 以 请 求 其 图 例 : 
http://eusoils.jrc.ec.europa.eu/ WRB/WMS threats.asp?version=1.3.0&cservice=WMS&Arequest 
=GetLegendGraphic&sld_version=1.1.0&layer=OCTOP80&format=image/png&STYLE=default 
返回 结果 如 图 4.3 所 示 。 


日 -~ 0.01 
9.01 - 1 
1.0 - 2.0 
2.0 - 6.0 


6.0 - 12.5 

12.5 - 25.6 
Wm 25.0 - 35.0 
Wm > 35.0 


图 4.3 ”使 用 GetLegendGraphic 操作 请 求 图 例 


该 图 例 说 明了 各 有 机 碳 含量 百分比 区 间 所 使 用 的 颜色 ， 基 本 是 颜色 越 深 表 示 含 量 越 高 。 
只 有 将 地 图 对 照 图 例 一 起 查看 才 有 意义 。 
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4.4 实践 6: 使 用 GeoServer 发 布 WMS 服务 


这 里 将 介绍 如 何 通过 GeoServer 将 空间 数据 发 布 为 WMS 服务 。 
4.4.1 使 用 默认 样式 发 布 一 个 图 层 


(1) 准备 数据 。 

从 下 载 文件 的 “Data\Neighborhoods ”文件 夹 中 ， 将 Neighborhoods 数据 复制 到 费城 数据 

文件 夹 中 (Ci\Data\Philadelphia)。 该 数据 已 经 经 过 投影 变换 ， 投 影 为 EPSG:3857。 
(2) 启动 GeoServer。 
选择 “开始 > 所 有 程序 > GeoServer 2.6.2 > Start GeoServer”， 启 动 GeoServer。 
(3) 进入 服务 器 管理 页 面 。 

通过 选择 “开始 > 所 有 程序 > GeoServer 2.6.2 > GeoServer Web Admin Page”， 或 者 直接 在 
浏览 器 中 输入 “http://localhost:8080/geoserver/web/” 地 址 ， 进 入 GeoServer 的 Web 管理 页 面 。 
在 GeoServer 的 Web 管理 页 面 中 输入 用 户 名 与 密码 进行 登录 。 如 果 是 默认 安装 ， 那 么 用 户 名 
为 “admin”， 密 码 为 “geoserver”。 

(4) 创建 工作 区 。 

在 GeoServer 中 发 布 和 部 署 地 图 数据 涉及 到 的 几 个 重要 的 概念 工作 区 (WorkSpace) 、 
数据 存储 (Store》 和 图 层 组 等 。 工 作 区 (有 时 又 称 为 命名 空间 〉 是 一 个 用 于 组 织 类 似 图 层 数 
据 (数据 集 ) 的 容器 。 常 常会 把 某 个 项 目 或 工程 的 相关 图 层 数据 放 到 一 个 工作 区 里 。 通 过 工 
作 区 的 使 用 ， 可 以 避免 相同 图 层 名 的 冲突 。 例 如 ， 在 名 为 beijing 工作 区 中 的 streets 图 层 ， 引 
用 时 使 用 的 是 “beijing:streets”, 这 就 可 以 与 在 另 一 个 工作 区 中 同样 名 为 streets 图 层 (dc:streets) 
避免 冲突 。 而 数据 存储 是 一 实际 的 文件 夹 或 数据 集 。 在 一 个 工作 区 中 可 以 包含 几 个 数据 存储 ， 
因此 在 引用 数据 存储 时 必须 在 数据 存储 前 加 上 工作 去 的 名 称 。 

在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “ 数 据 ” 中 的 “工作 区 ”， 在 右边 窗口 列 
出 了 7 个 示例 工作 区 与 管理 工作 区 的 两 个 连接 ， 分 别 是 添加 与 删除 工作 区 。 

单 击 “ 添 加 新 的 工作 区 ”， 进 入 新 建 工 作 区 的 界面 ， 在 这 里 需要 输入 工作 区 的 名 字 和 命 
名 空间 URL。 在 Name 文本 框 中 输入 “webgis ”， 在 命名 空间 URL 文本 框 中 输入 
“http://localhost:8080/geoserver/webgis”， 如 图 4.4 所 示 。 然 后 单 击 “ 提 交 ” 按 钮 。 命 名 空间 
URL 并 不 需要 是 一 个 真实 的 URL， 只 需要 确保 它 是 唯一 标识 。 
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GeoServer 


新 建 工作 区 


配置 一 个 新 的 工作 区 


Name 
lvebgis 

命名 空间 URI 

lnttp://localhost :B080/geoserver/webgis 
命名 空间 URI 与 这 个 工作 区 关联 

默认 工作 区 


要 交 。 持 开 
图 4.4 新 建 工作 区 


(5) 在 工作 去 中 加 入 新 的 数据 存储 。 

数据 存储 维护 着 地 图 数据 和 文件 系统 中 的 文件 夹 的 映射 关系 。 

在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “ 数 据 ” 中 的 “数据 存储 ”， 在 右边 窗口 
列 出 了 9 个 示例 数据 存储 与 管理 数据 存储 的 两 个 连接 ， 分 别 是 添加 与 删除 数据 存储 。 

点 击 “ 添 加 新 的 数据 存储 ”， 进 入 新 建 数据 源 页 面 。 在 该 窗口 中 需要 确定 数据 源 的 类 型 。 
在 GeoServer 中 ， 如 果 同 时 有 栅 格 与 矢量 数据 的 话 ， 则 需要 分 别 建立 数据 存储 。 在 本 实践 中 ， 
我 们 使 用 的 是 矢量 文件 数据 ， 因 此 选择 “Directory of spatial files (shapefiles)”， 进 入 新 建 矢 量 
数据 源 窗 口 。 

按照 图 4.5 所 示 的 方式 设置 各 参数 ， 将 工作 区 设置 为 “webgis”， 将 数据 源 名 称 设置 为 
“Philadelphia”， 然 后 设置 数据 对 应 的 文件 夹 。 最 后 单 击 “ 保 存 ” 按 钮 。 


新 建 矢量 数据 源 
添 圳 一个 新 的 关 时 扫 扫 和 


Directory of spatial fies (shapefies) 
Takasa directory of shapefles and exposes t 2 a cata store 


le: Data\Fhilaielphia 浏览 … 


回 如 曙 起 澳 空间 宗 引 或 者 间 宗 引 ij， 重新 中 立 空间 宗 引 
口 使 用 内 存 当 射 的 过 中 区 
回 高 还 要 存 机 重 青 内存 遇 册 


图 4.5 新 建 矢量 数据 源 
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要 注意 的 是 ， 即 使 在 文件 夹 中 同时 还 包含 栅 格 数据 ， 也 不 影响 创建 矢量 数据 源 的 数据 存 
储 。 只 是 如 果 想 使 用 栅 格 数据 ， 那 么 则 需要 另外 新 建 数据 存储 。 

通过 上 面 的 设置 之 后 ， 便 可 以 指定 需要 发 布 为 服务 的 矢量 图 层 。 

(6) 发 布 图 层 。 

在 新 建 矢 量 数据 源 页 面 中 单 击 “ 保 存 ” 按 钮 后 ， 自 动 切换 到 新 建 图 层 页 面 。 该 页 面 列 出 
了 Philadelphia 文件 夹 中 所 有 的 矢量 文件 。 

或 者 ， 在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “ 数 据 ” 中 的 “图 层 ”， 在 右边 窗 
口 列 出 了 19 个 示例 图 层 与 管理 图 层 的 两 个 连接 ， 分 别 是 添加 与 删除 资源 。 选 择 “ 添 加 新 的 资 
源 ”， 也 同样 进入 新 建 图 层 页 面 。 从 下 拉 列 表 框 中 选择 webgis:philadelphia， 表 示 从 该 数据 存 
储 中 选择 图 层 。 

找到 Neighborhoods 图 层 ， 然 后 选择 “发 布 ”连接 ， 进 入 编辑 图 层 页 面 。 

在 该 页 面 中 包含 了 许多 发 布 图 层 的 选项 。 在 数据 选项 卡 中 定位 到 “坐标 参照 系统 ”部 分 ， 
首先 在 “定义 SRS” 文 本 框 中 输入 “EPSG:3857”， 并 将 “SRS 处 理 ” 设 置 为 “强制 声明 ”。 
然后 通过 单 击 “ 从 数据 中 计算 ”与 “Compute from native bounds” 计 算 并 自动 填充 边框 坐标 ， 
如 图 4.6 所 示 。 


坐标 参考 系统 

本 机 SRS 

UNKNOWN WGS_84_pseudo_Mercator 
定义 SRS 

EPSG:3857 查找 . . ， 

SRS 处 理 


强制 声明 习 


边框 

Native Bounding Box 

最 小 X 最 小 最 大 X 最 大 Y 

-8, 330, 176. 80670 | 4, 846, 475. 6438316 | -8, 344, 030. 35605:| 4 336, 000. 4396522 
从 数据 中 计算 

入 度 /经 度 边 征 

最 小 X 最 小 Y 最 大 X 最 大 YY 

-75. 2804090909091| 39. 8659090897652s |-74. 9557 40. 13789090816097 


Compute from native bounds 
图 4.6 设置 坐标 参照 系统 与 边框 

最 后 在 页 面 底部 选择 “保存 ”， 进 入 到 图 层 列表 页 面 。 

注意 在 该 步骤 中 ， 如 果 在 选择 了 “Compute from native bounds” 之 后 并 没有 计算 出 经 纬度 
表示 的 边框 ， 那 么 可 能 是 GeoServer 没 能 正确 解析 “定义 SRS” 文 本 框 中 输入 的 坐标 参照 系 
统 。 这 时 需要 单 击 “查找 ”按钮 ， 然 后 选择 EPSG:3857。 最 后 青 重新 选择 计算 。 

(7) 预览 图 层 。 

在 GeoServer 的 Web 管理 页 面 窗 口 的 左边 单 击 “数据 ”中 的 “Layer Preview”， 在 右边 
窗口 列 出 了 发 布 为 服务 的 图 层 与 图 层 组 。 定 位 到 webgis:Neighborhoods 图 层 ， 然 后 选择 
OpenLayers, 将 会 弹出 一 个 新 的 窗口 , 在 该 窗口 中 使 用 OpenLayers 访问 该 图 层 的 WMS 服务 ， 
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如 图 4.7 所 示 。 
:| 
国 Openlayers map preview x 【十 
国 localhosts0s0/gecserver/webc r C 六 抽查 -> 四 三 
Scale =1: S51K -8339725.59731, 4905454.12470 
Click on the map to get feature info 


图 4.7 图 层 服务 预览 
4.4.2 ”使 用 样式 化 图 层 描述 符 


上 述 的 WMS 服务 确实 是 包含 了 美国 费城 的 社区 ， 但 是 没有 注 记 ， 而 且 也 没有 颜色 的 区 
分 。 以 下 将 介绍 如 何 使 用 样式 化 图 层 描述 符 ， 加 上 注 记 及 无 填充 蓝 色 边界 线条 的 多 边 形 符号 。 
这 样 便 可 将 其 作为 专题 图 层 合 加 在 其 他 基础 底 图 上 。 

(1) 下 载 一 个 带 注 记 的 多 边 形 样式 化 图 层 描述 符 。 

在 浏览 器 地 址 栏 中 输入 如 下 地 址 : 

http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/polygons.html#polygon-with-styl 
ed-label 

这 是 一 个 带 注 记 的 多 边 形 样 式 化 图 层 描 述 符 ， 非 常 接近 我 们 的 要 求 。 我 们 将 以 此 为 基础 


开 该 .sld 文件 。 
使 用 浏览 器 的 另存 为 功能 ， 将 文件 保存 为 polygonwithstyledlabel.sld。 
注意 ,不 能 在 浏览 器 窗口 中 复制 然后 将 其 粘贴 到 一 个 文本 文件 中 , 这 样 做 的 话 GeoServer 
就 会 不 能 正确 识别 。 因 为 窗口 中 显示 的 内 容 没 有 包含 完整 的 XML 文件 头 。 
(2) 修改 .sld 文件 。 


到 


第 4 章 使 用 WMS 在 服务 器 端 绘制 与 查询 地 图 


使 用 文本 编辑 器 打开 该 .sld 文件 ， 定 位 到 PolygonSymbolizer 与 TextSymbolizer 部 分 ， 可 
见 到 如 下 内 容 : 


<PolygonSymbolizer> 
<Fill> 
<CssParameter name="fill">#40FF40</CssParameter> 
</Fi> 
<Stroke> 
<CssParameter name="stroke">#FFFFFF</CssParameter> 
<CssParameter name="stroke-width">2</CssParameter> 
</Stroke> 
</PolygonSymbolizer> 
<TextSymbolizer> 
<Label> 
<ogc:PropertyName>name</ogc:PropertyName> 
</Label> 
<Font> 
<CssParameter name="font-family">Arial</CssParameter> 
<CssParameter name="font-size">11</CssParameter> 
<CssParameter name="font-style">normal</CssParameter> 
<CssParameter name="font-weight">bold</CssParameter> 
</Font> 
<LabelPlacement> 
<PointPlacement> 
<AnchorPoint> 
<AnchorPointX>0.5</AnchorPointX> 
<AnchorPointY>0.5</AnchorPointY> 
</AnchorPoint> 
</PointPlacement> 
</LabelPlacement> 
<Fill> 
<CssParameter name="fill">#000000</CssParameter> 
</Fi> 
<VendorOption name="autoWrap">60</VendorOption> 
<VendorOption name="maxDisplacement">150</VendorOption> 
</TextSymbolizer> 


在 PolygonSymbolizer (多 边 形 符号 ) 部 分 注意 stroke (画笔 ) 与 人 (填充 ) 是 如 何 设置 
的 ， 在 TextSymbolizer 中 注意 Font (字体 ) 与 LabelPlacement ( 注 记 位 置 ) 的 设置 。 还 需要 注 
意 到 标记 为 VendorOption 的 标签 , 表示 这 不 是 样式 化 图 层 描述 符 规范 的 内 容 , 但 是 GeoServer 
支持 。 

下 面 就 需要 编辑 该 样式 化 图 层 描述 符 , 将 其 修改 为 无 填充 、 蓝 色 边 界线 条 的 多 边 形 符号 ， 
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并 佩带 蓝 色 注 记 。 之 外 还 要 修改 的 是 ogc:PropertyName 标签 指定 的 注 记 字 段 。 本 示例 中 默认 
是 “name”， 但 在 neighborhoods 矢量 数据 中 ， 对 于 的 字段 名 是 “NAME”， 需 要 区 分 大 小 写 。 
修改 后 的 对 应 部 分 的 内 容 如 下 : 


<PolygonSymbolizer> 
<Stroke> 
<CssParameter name="stroke">#133E73</CssParameter> 
<CssParameter name="stroke-width">2</CssParameter> 
</Stroke> 
</PolygonSymbolizer> 
<TextSymbolizer> 
<Label> 
<ogc:PropertyName>NAME</ogc:PropertyName> 
</Label> 
<Font> 
<CssParameter name="font-family">Arial</CssParameter> 
<CssParameter name="font-size">11</CssParameter> 
<CssParameter name="font-style">normal</CssParameter> 
<CssParameter name="font-weight">bold</CssParameter> 
</Font> 
<LabelPlacement> 
<PointPlacement> 
<AnchorPoint> 
<AnchorPointX>0.5</AnchorPointX> 
<AnchorPointY>0.5</AnchorPointY> 
</AnchorPoint> 
</PointPlacement> 
</LabelPlacement> 
<Fill> 
<CssParameter name="fill">#133E73</CssParameter> 
</Fill> 
<VendorOption name="autoWrap">60</VendorOption> 
<VendorOption name="maxDisplacement">150</VendorOption> 
</TextSymbolizer> 


(3) 将 .sld 文件 加 入 到 服务 器 中 。 
在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “数据 ”中 的 “Styles”， 在 右边 窗口 列 出 
了 服务 器 中 已 包含 的 预 加 载 样式 ， 以 及 管理 样式 的 连接 。 
单 击 “Add a new style ”连接 ， 进 入 New style 页 面 。 将 新 样式 的 名 称 设置 为 
“PolygonWithStyledLabel”， 将 工作 区 设置 为 “webgis”。 然 后 在 页 面 底部 浏览 到 样式 化 图 
层 描 述 符 polygonwithstyledlabel.sld 文件 ， 选 择 “upload” 并 将 其 上 传 到 GeoServer 服务 器 上 。 
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如 图 4.8 所 示 。 最 后 单 击 “ 提 交 ” 按 钮 完成 新 建 样式 。 
New style 


polygonwithstyledlabel 


工作 区 

webgis 四 
Format 

sLD[y] 
Copy from existing style 

请 选择 回 copy... 


EFI- EMI 


1 <2xml version="1.0" encodin 0-8859-1"2> 入 

2 <StyledLayerDescriptor ver. .0.0" 
xsi:schemaLocation="http://www.opengis. 
xmlns="http://Wwww.opengia.net/sld" 
xmlns:ogc="http://www.opengis.net/ogc" 
xmlna:xlink="http://www.w3.org/1999/x1i 
xmlna:x3i="http://waw.w3.org/2001/XMLSc 


<NamedLayer> 
<Name>Polygon with styled label</Name> 
<UserStyle> 
<Title>SLD Cook Book: Polygon with sty 
<FeatureTypeStyle> 
<Rule> 
<PolygonSymbolizer> 
<Stroke> 


<CsasParameter name="stroke">#] 
<CssParameter name="stroke-wic 
</Stroke> 
</PolygonSymbolizer> 
<IextSvrbolizer> 


4.8 新 建 样式 


在 单 击 “ 提 交 ” 按 钮 前 ， 还 可 以 单 击 “Validate” 验 证 是 否 存 在 错误 。 

(4) 应 用 样式 化 图 层 描 述 符 。 

在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “ 数 据 ” 中 的 “图 层 ”， 在 右边 的 页 面 中 
找到 Neighborhoods 图 层 ， 然 后 单 击 ， 进 入 编辑 图 层 页 面 。 

在 编辑 图 层 页 面 中 ， 单 击 “ 发 布 ” 标 签 。 定 位 到 “WMS Settings” 部 分 ， 在 可 获取 样式 
列表 框 中 选择 PolygonWithStyledLabel， 然 后 选择 向 右 的 箭头 ， 将 其 移动 到 选择 样式 中 。 并 将 
默认 样式 设置 为 “PolygonWithStyledLabel”， 如 图 4.9 所 示 。 最 后 单 击 “ 保 存 ” 按 钮 。 
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WMS Settings 


Queryable 


口 opaque 


Default Style 
polygonvithstyledlabel [|v 


Selected Styles 


polygonwithstyledlabel 
polygon 


poly_landmarks 
pophatch 
population 
rain 

raster 
restricted 
simple roads 


图 4.9 设置 图 层 的 样式 
从 图 中 可 以 看 出 ， 一 个 图 层 可 以 有 多 个 样式 ， 但 是 需要 选择 其 中 一 个 作为 默认 样式 。 对 


于 本 示例 ， 另 一 样式 可 以 为 GeoServer 自 带 的 基本 灰色 多 边 形 样式 。 
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通过 图 层 预览 功能 ，Neighborhoods 图 层 在 OpenLayers 查看 器 中 的 显示 如 图 4.10 所 示 。 
-°° EN 


. 加 openLayers mappreview x | + 


图 localhosteoao/geoseverweb rcC| 最 大 于 | 外 | 三 | 


Scale =1: 276K -8354247.76228, 4884842.53518 
Click on the map to get feature info 


图 4.10 设置 自 定义 样式 化 图 层 描述 符 后 的 社区 图 层 
相对 于 QGIS 或 ArcMap 等 桌面 程序 来 说 ，GeoServer 和 WMS 中 的 注 记功 能 使 用 的 规则 


第 4 章 使 用 WMS 在 服务 器 端 绘制 与 查询 地 图 一 


比较 简单 。 但 是 注 记 仍然 是 网 络 地 图 一 个 非常 棘手 的 问题 。 注 记 属于 计算 密集 型 ， 并 且 依 赖 
于 复杂 的 规则 ， 必 定 减缓 地 图 绘制 速度 。 由 于 这 些 问题 ，Web GIS 中 有 时 使 用 互动 弹出 窗口 
或 文本 作为 蔡 代 机 制 。 


4.4.3 在 QGIS 中 访问 WMS 


由 于 WMS 是 一 标准 的 网 络 地 图 服务 ， 因 此 很 多 客户 端 都 能 显示 WMS。 在 上 面 中 演示 了 
使 用 OpenLayers 来 预览 WMS 图 层 ， 下 面 将 介绍 如 何在 QGIS 中 访问 WMS 图 层 。 
(1) 新 建 WMS 连接 。 
启动 QGIS， 在 窗口 左边 的 工具 条 中 选择 “添加 WMS/WMTS 图 层 ” 羔 按钮 ， 打 开 “Add 
Layer(s) fom a WM(T)S Server” 窗 口 。 
选择 “新 建 ” 按 钮 ， 打 开 图 4.11 所 示 的 “创建 一 个 新 的 WMS 连接 ”窗口 。 将 名 称 设置 
为 “Philadelphia Layers”，URL 设置 为 “http://localhost:8080/geoserver/webgis/wms?”。 最 后 
单 击 “确定 ”按钮 。 
四 创建 一 个 新 的 WMS 连接 ? EE 
连接 详情 
名 称 Philadelphia Layers 
Fht http://loodlhont:0060/6eoserver/aebEis/wms? 
如 果 服 务 和 要 基本 身份 证， 输入 用 户 名 和 司 过 宇 码 


用 户 名 全 
密码 
参考 
WPIode 全 部 
Tenare Gagap/GetTile VEI reperted in espsbilities 
在 功能 中 知 路 报告 的 CetFestureInf。 WRI 
多 贿 铀 方向 (RS 1 3/mms) 
翻转 四方 向 
平滑 像素 转换 


| 确定 取消 帮助 
图 4.11 新 建 WMS 连接 


(2) 在 地 图 中 加 入 WMS 图 层 。 
建立 连接 之 后 ， 然 后 单 击 “ 连 接 ” 按 钮 ， 便 会 列 出 连接 中 包含 的 图 层 。 
在 图 层 列表 中 选择 Neighborhoods 图 层 , 然后 单 击 “ 更 改 ” 按 钮 ， 打 开 坐 标 参 照 系 选择 器 
窗口 ， 将 坐标 参照 系 设置 为 EPSG:3857。 
最 后 单 击 “ 添 加 ”按钮 ， 在 地 图 中 加 入 Neighborhoods 图 层 。 
(3) 在 地 图 中 闭 加 OpenStreetMap 底 图 。 
在 QGIS 中 , 选择 “网 络 ” 菜 单 的 “OpenLayers plugin > OpenStreetMap > OpenStreetMap” 
命令 ， 将 在 地 图 中 显示 OpenStreetMap 地 图 。 
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在 图 层 控制 器 中 ， 通 过 拖拉 使 Neighborhoods 图 层 位 于 OpenStreetMap 地 图 上 部 。 
最 后 地 图 显示 效果 如 图 4.12 所 示 。 


“SBINARES 


小 
全 


到 ti 


4.12 在 QGIS 中 访问 WMS 图 层 


通过 上 面 的 步骤 ， 我 们 创建 了 一 个 “混搭 ” 地图， 该 地 图 引用 两 个 不 同 服务 器 的 Web 服 
务 。 在 本 书 的 后 面 内 容 中 ， 将 介绍 如 何 创建 更 实用 的 混搭 Web 应 用 。 

QGIS 不 仅 能 展示 WMS 图 层 ， 也 能 帮助 创建 样式 化 图 层 描述 符 。 在 下 一 个 实践 中 ， 将 介 
绍 该 内 容 。 


4.5 实践 7: 高 级 符号 与 图 层 组 
在 上 一 节 中 介绍 了 一 些 基本 的 样式 化 图 层 描述 符 示例 ， 以 及 如 何在 GeoServer 中 如 何 样 
式 化 一 个 WMS 图 层 。 本 节 将 介绍 如 何在 QGIS 中 设置 样式 ， 以 及 在 GeoServer 中 如 何 将 多 个 
图 层 组 成 图 层 组 。 


4.5.1 使 用 QGIS 创建 样式 化 图 层 描 述 符 


QGIS 可 以 将 当前 图 层 的 样式 另存 为 样式 化 图 层 描述 符 , 然后 便 可 以 使 用 前 面 介绍 的 方式 
在 GeoServer 中 使 用 了 。 由 于 有 界面 化 的 操作 ， 因 此 在 QGIS 中 配置 符号 比 直 接 编 写 XML 要 
简单 的 多 。 但 是 要 注意 的 是 ，QGIS 不 能 将 像 注 记 等 一 些 样式 保存 到 .sld 文件 中 。 同 时 ， 由 于 
毕竟 是 两 个 完全 不 同 的 系统 , 对 于 同样 的 符号 , 在 QGIS 与 GeoServer 中 显示 有 稍微 有 些 区 别 ， 
因此 在 得 到 正确 的 结果 之 前 可 能 需要 一 些 实验 ， 而 不 会 一 帆 风 顺 。 
(1) 发 布 WMS 服务 。 
按照 实践 6 中 介绍 的 方法 ， 在 GeoServer 中 将 Philadelphia 中 的 roads.shp (道路 数据 ) 与 
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city_limits.shp〈 城 市 边界 数据 ) 两 个 文件 发 布 为 WMS 图 层 。 使 用 实践 6 创建 的 webgis 工作 
区 与 philadelphia 数据 存储 。 
(2) 在 QGIS 中 配置 符号 。 

启动 QGIS， 将 Philadelphia 文件 夹 中 的 roads.shp 与 city_limits.shp 两 个 文件 加 入 到 地 图 
中 。 注 意 这 里 使 用 的 矢量 文件 ， 而 不 是 刚 发 布 的 WMS 服务 。 

将 city_ limits 图 层 的 样式 设置 为 无 边线 并 用 非常 淡 的 灰色 填充 。 

将 道路 图 层 的 样式 设置 为 稍微 深 一 点 的 灰色 细 线 条 ， 线 宽 使 用 默认 值 。 

设置 后 的 地 图 如 图 4.13 所 示 。 
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图 4.13 在 QGIS 中 配置 图 层 的 样式 

(3) 将 样式 输出 为 SLD 文件 。 

在 图 层 列表 中 ， 双 击 roads 图 层 ， 打 开 图 层 数据 对 话 框 ， 切 换 到 “样式 ”选项 卡 中 。 选 择 
“保存 样式 ”中 的 “SLD 文件 ”， 如 图 4.14 所 示 ， 将 对 应 的 样式 保存 为 grayroads.sld 文件 。 
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图 4.14 在 QGIS 中 将 样式 保存 为 SLD 文件 
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(4) 设置 WMS 图 层 应 用 SLD 

返回 到 GeoServer 的 Web 管理 页 面 ， 单 击 左边 “数据 ”中 的 “Styles”。 按 照 实践 6 介绍 
的 方法 与 步骤 ， 在 webgis 工作 区 中 新 建 一 个 名 为 grayroads 的 样式 ， 将 其 样式 文件 指定 为 在 
QGIS 中 导出 的 grayroads.sld， 并 将 该 文件 上 传 到 GeoServer 服务 器 上 。 

按照 实践 6 介绍 的 方法 与 步骤 ， 将 在 GeoServer 中 发 布 的 费城 的 道路 图 层 的 默认 样式 指 
定 为 grayroads。 并 使 用 OpenLayers 进行 预览 ， 确 保 应 用 了 所 需要 的 样式 。 

(5) 设置 WMS 服务 city_limits 图 层 的 默认 样式 。 

重复 上 面 的 3、4 步 又， 在 QGIS 将 城市 边界 的 浅 灰色 样式 导出 为 greycitylimits.sld 文件 ， 
在 GeoServer 中 创建 一 个 使 用 该 SLD 文件 、 名 为 greycitylimits 的 样式 ， 并 将 该 样式 设置 为 
city_limits 图 层 的 默认 样式 。 


4.5.2 将 多 图 层 发 布 为 WMS 服务 


在 某 些 情况 下 ， 需 要 将 WMS 作为 专题 图 层 倒 加 在 非 WMS 底 图 之 上 。 实 践 6 介绍 的 就 
是 这 类 应 用 。 但 在 某 些 情况 下 ， 只 需要 一 个 非常 简单 的 Web GIS 应 用 ， 这 时 可 以 将 WMS 服 
务 同时 作为 基础 图 层 和 专题 图 层 .GeoServer 可 以 将 多 层 作 为 一 个 单一 的 WMS 服务 进行 发 布 。 
我 们 将 使 用 社区 图 层 、 城 市 边界 图 层 以 及 道路 图 层 ， 将 它们 作为 图 层 组 进行 服务 的 发 布 。 

(1) 先 建 图 层 组 。 
在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “ 数 据 ” 中 的 “图 层 组 ”， 在 右边 窗口 列 
出 了 服务 器 中 已 包含 的 图 层 组 以 及 管理 图 层 组 的 连接 。 

(2) 在 图 层 组 中 添加 图 层 。 

单 击 “ 添 加 新 图 层 组 ”连接 , 进入 “新 建 图 层 组 ”页 面 ,将 “命名 ”设置 为 NeighborhoodMap， 
“标题 ”设置 为 费城 社区 地 图 , “摘要 ”为 “费城 社区 地 图 ， 数 据 来 自 于 “Zillow.com”, “ 工 
作 区 ”设置 为 webgis。 

向 下 滚动 鼠标 ， 定 位 到 “图 层 ” 部 分 ， 通 过 “添加 图 层 ” 连 接 ， 加 入 社区 、 城 市 边界 以 
及 道路 这 3 个 图 层 ， 并 使 用 顺序 箭头 ， 按 图 4.15 调整 图 层 顺序 。 这 里 要 注意 的 是 ， 该 列表 中 
最 上 面 的 图 层 要 最 先 绘制 ， 第 二 个 图 层 在 该 基础 上 绘制 ， 以 此 类 推 。 


位 置 图 层 点 认 风 格 ”风格 出 除 
3 webgis:city_imits 口 greyatyimits © 
271 ‘webgis:roads 口 grayroads © 
i webgis:Neighborhoods ” 口 ] poygonwithstyledabel © 


Results 0 to 0 (out of 0 tems) 


图 4.15 在 图 层 组 中 添加 图 层 并 调整 顺序 


(3) 设置 坐标 参照 系 与 边界 。 
定位 到 “坐标 参照 系 ”部 分 ， 将 坐标 参照 系 设置 为 EPSG:3857， 然 后 单 击 “ 生 成 边界 ” 
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按钮 ， 计 算 服 务 的 坐标 范围 并 自动 填写 页 面 中 “边界 ”相关 的 4 个 文本 框 ， 如 图 4.16 所 示 。 


界 
小 X 最 小 最 大 X 最 大 Y 
-8, 380, 176. 806705 |4, 846, 475. 643831€|-8, 344. 030. 35605:| 4, 386, 005. 7062077 
标 参 考 系 
EPSG:3857 查找 . . 。 | EP5G:WGS 84 / Pseudo-Mercator. 
生成 边界 | 


图 4.16 设置 坐标 参照 系 与 计算 边界 


(4) 其 他 参数 的 设置 。 

定位 到 “Tile cache configuration” 部 分 ， 取 消 其 中 选中 的 两 个 选项 。GeoServer 可 以 创建 
切片 缓存 ， 我 们 将 在 下 一 章 详细 讲解 切片 地 图 的 使 用 。 

在 页 面 底 部 选择 “保存 ”， 将 返回 到 “图 层 组 ”页 面 ， 在 列表 中 已 经 增加 了 我 们 新 建 的 
NeighborhoodMap 图 层 组 。 

(5) 预览 图 层 组 。 

按照 实践 6 介绍 的 方法 ， 使 用 OpenLayer 预览 该 图 层 组 ， 显 示 结 果 如 图 4.17 所 示 。 

Ex | 


国 openLayers map preview x 【二 


转 localhosts0s0/oeosereriwet v C 及 人 月 有 -四 三 


Scale =1: 138K -8364694.82587, 4877995.46408 | 
Chick on the map to get feature info | 


图 4.17 使 用 OpenLayer 预览 NeighborhoodMap 图 层 组 
读者 可 以 按照 实践 6 介绍 的 方式 ， 在 QGIS 访问 该 图 层 组 。 
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4.6 习题 


(1) 下 面 是 两 个 WMS 服务 的 路 径 : 


® http://sampleserverl.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCities 
Rivers_USA/ MapServer WMSServer 
e http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/nOr.cgi 


编写 一 说 明文 档 ， 描 述 如 下 内 容 : 


。 它们 都 支持 那些 操作 ; 

e 发 布 服务 的 组 织 以 及 它们 所 使 用 的 技术 ; 

。 每 个 服务 包含 哪些 图 层 ; 

。 针对 每 个 操作 构造 相应 的 请 求 ， 给 出 并 分 析 响 应 结果 ; 

。 图 层 样式 存在 哪些 缺陷 ， 如 何 使 用 本 章 介绍 的 方法 加 以 改进 。 


(2) 阅读 如 下 文档 ， 进 一 步 了 解 样式 化 图 层 描述 符 : 


。 SLD 介绍 (docs.geoserverorg/stable/en/userstyling/sld-introduction.html ); 
。 SLD 使 用 ( docs.geoserverorg/stable/en/user'styling/sld-working.html ); 
。 SLD 说明书 (docs.geoserver.org/stable/en/user/styling/sld-cookbook/index.html )。 


(3) 使 用 GeoServer 以 及 本 章 介绍 的 方法 ， 将 第 3 章 习题 指定 收集 的 数据 发 布 为 一 个 
WMS 服务 。 服 务 可 以 是 一 个 单独 的 图 层 ， 也 可 以 是 一 个 图 层 组 ， 但 是 必须 使 用 GeoServer 默 
认 样 式 之 外 的 自 定义 样式 。 编 写 一 说 明文 档 ， 包 含 如 下 内 容 : 

。 发 布 服务 的 图 层 说 明 ; 

e 发 布 后 的 服务 在 GeoServer 图 层 列表 中 的 截屏 ; 
e 描述 制作 样式 的 过 程 ; 

。 样式 在 GeoServer 中 的 蕉 屏 ; 

。 使 用 OpenLayer 预览 这 些 WMS 服务 的 截屏 。 
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从 本 章 可 以 学 习 到 : 

% 为 什么 使 用 切片 地 图 

部 何 时 使 用 地 图 切片 

创建 与 提供 切片 地 图 服务 的 策略 
使 用 GeoWebCache 创建 切片 
如 使 用 TileMill 创建 切片 


他 


到 Web GIS 原理 与 应 用 开发 


如 果 要 提高 Web 地 图 的 访问 速度 ， 使 用 地 图 切片 是 非常 有 效 的 方法 。 地 图 切片 就 是 在 多 
个 比例 尺 下 配置 地 图 ， 然 后 提前 把 每 个 比例 尺 下 的 地 图 绘制 为 小 块 图 片 ， 保 存在 服务 器 上 名 
为 缓存 的 目录 中 。 这 样 客户 端 在 访问 地 图 时 ， 可 以 直接 获取 需要 的 小 块 图 片 拼接 成 整 幅 地 图 ， 
而 不 是 由 服务 器 动态 创建 出 一 幅 图 片 再 送 到 客户 端 ， 从 而 极 大 提高 了 访问 速度 。 

本 章 将 介绍 地 图 切片 的 利弊 ， 以 及 创建 与 维护 地 图 缓存 的 策略 。 并 通过 两 个 实践 演示 如 
何在 实际 工作 中 创建 地 图 切片 。 第 一 个 实践 演示 如 何 使 用 GeoServer 的 GeoWebCache 软件 来 
创建 一 个 简单 的 缓存 地 图 。 在 第 二 个 实践 中 ， 介 绍 使 用 TileMill 和 CartoCSS 标记 语言 创建 比 
GeoServer 更 好 的 地 图 切片 。 


5.1 为 什么 使 用 切片 地 图 


正如 在 前 面 内 容 中 所 介绍 的 ， 最 初 的 Web 地 图 ， 无 论 在 地 图 中 包含 了 多 少 个 图 层 ， 也 无 
论 有 多 少 访问 请 求 ， 通 常 都 是 由 服务 器 动态 绘制 。 这 也 就 是 第 4 章 介绍 的 使 用 GeoServer 与 
WMS 的 方式 。 但 是 正如 大 家 注意 到 的 ， 这 类 地 图 中 符号 、 标 注 与 注 记 的 选择 非常 有 限 而 且 难 
以 应 用 。 事 实 上 ， 多 年 来 为 了 避免 妨碍 性 能 ，Web 制图 者 不 得 不 使 用 最 少 的 图 层 与 简单 符号 
来 构造 地 图 。 许 多 情况 下 ， 在 开发 Web GIS 应 用 时 ， 甚 至 不 需要 专业 制图 人 员 的 参与 ， 而 是 
由 服务 器 管理 员 通过 XML 文件 来 定义 图 层 顺序 和 符号 大 小 等 。 这 种 情况 在 开放 Web 服务 规 
范 (如 WMS) 与 商业 Web 服务 (如 ESRI 的 ArcIMS ) 中 都 存在 。 

造成 使 用 这 种 方法 的 部 分 原因 是 为 了 使 web GIS 应 用 程序 看 起 来 就 像 桌 面 系统 。 有 时 ， 
这 些 应 用 被 称 为 “瑞士 军刀 应 用 程序 ”， 因 为 它们 试图 使 用 Web GIS 来 解决 一 切 问题 。 人 们 
希望 在 Web GIS 中 也 能 随意 切换 图 层 的 可 见 性 、 重 新 排序 图 层 、 动 态 更 改 图 层 符号 ， 以 及 其 
他 所 有 桌面 GIS 应 用 程序 能 做 的 一 切 。 讽 刺 的 是 ， 当 这 种 心态 盛行 的 时 候 ， 网 络 技术 还 远 远 
满足 不 了 这 类 需求 。 

在 2005 年 前 后 ， 随 着 谷歌 地 图 、 微 软 虚拟 地 球 ( 现 在 称 为 Bing 地 图 ) 以 及 其 他 流行 的 
Web GIS 应 用 的 出 现 ， 人 们 开始 意识 到 ， 也 许 他 们 并 不 需要 管理 每 一 个 图 层 所 有 属性 的 功能 。 
这 些 互 联网 巨头 已 经 开始 将 矢量 图 层 融合 为 一 张 栅 格 化 的 图 像 ， 这 些 图 像 被 切 分 为 256 像素 
X256 像素 的 图 片 及 切片 。 这 些 图 片 预 先生 成 并 存储 在 磁盘 上 ， 以 便 快 速 分 发 到 客户 端 。 这 
样 做 可 以 同时 支持 成 千 上 万 个 并 发 请 求 ， 而 这 对 于 动态 地 图 绘制 而 言 基 本 是 不 可 能 的 。 

正如 图 5.1 显示 的 ， 切 片 地 图 采用 的 是 金字 塔 模型 ， 是 一 种 多 分 辨 率 层次 模型 ， 从 切片 
金字 塔 的 底层 到 顶层 ， 比 例 尺 越 来 越 小 ， 分 辨 率 越 来 越 低 ， 但 表示 的 地 理 范围 不 变 。 切 片 地 
图 通常 都 带 有 一 个 级 别 、 行 与 列 编号 方案 ， 以 便 将 来 自 多 个 切片 地 图 服务 的 切片 放置 到 正确 
的 位 置 。 


第 5 章 切片 地 图 


小 比例 尺 
3 
大 比例 尺 
地 图 


5.1 切片 地 图 包含 的 内 容 


有 了 切片 地 图 ， 制 图 人 员 再 也 不 用 担心 性 能 问题 了 ， 他 们 可 以 使 用 他 们 所 掌握 的 所 有 工 
具 ， 来 制作 一 张 美观 Web 地 图 。 一 旦 创建 了 地 图 切片 ， 这 些 切片 就 保存 到 了 服务 器 上 的 某 个 
文件 夹 中 ， 服 务 器 检索 美观 地 图 图 片 与 丑 的 图 片 的 速度 是 一 样 的 。 正 由 于 Web 服务 器 可 以 快 
速 分 发 切片 地 图 图 像 ， 因 此 我 们 可 以 使 用 AJAX (Asynchronous JavaScript and XML， 异 步 
JavaScript 和 XML) 编程 技术 来 从 服务 器 获取 图 片 ， 这 样 当 用 户 漫 游 时 不 会 出 现 页 面 闪烁 的 
现象 。 

这 种 变化 是 革命 性 的 。 一 类 是 具有 图 层 排序 与 调整 符号 颜色 等 功能 ， 但 响应 非常 迟缓 的 
丑陋 的 地 图 应 用 ; 一 类 是 没有 图 层 控 制 ， 但 具有 惊人 美观 并 且 快 速 响应 的 地 图 应 用 。 对 于 这 
两 类 Web GIS 应 用 的 选择 ， 虽 然 对 于 一 些 GIS 长 期 爱好 者 可 能 还 需要 停 下 来 比较 一 下 ， 但 对 
于 普通 互联 网 用 户 来 说 根本 不 用 思索 ， 他 们 无 疑 会 选择 后 者 。 

在 谷歌 地 图 发 布 了 一 两 年 以 后 ， 商 业 GIS 软件 开始 提供 创建 地 图 切片 的 功能 。 由 于 可 以 
使 用 成 熟 的 地 图 制作 工具 AreMap, 很 多 人 选择 使 用 ArcGIS Server 来 发 布 空间 信息 Web 服务 ， 
但 是 其 价格 不 菲 。 我国 的 超 图 SuperMap iServer 是 另 一 种 商业 选择 。 免 费 和 开源 Mapnik 库 也 
可 以 创建 地 图 切片 ， 但 是 直到 最 近 几 年 才 提 供 了 将 Mapnik 封装 的 用 户 友好 的 应 用 程序 〈 即 
TileMill) 。 

如 果 一 个 Web GIS 应 用 有 成 千 上 万 用 户 并 发 访问 ， 那 么 切片 地 图 是 唯一 一 个 合理 的 解决 
方案 。 然 而 ， 切 片 地 图 不 提供 改变 图 层 顺序 与 符号 的 功能 。 人 们 开始 研究 其 他 改进 方案 ， 将 
通用 的 基础 底 图 图 层 发 布 为 切片 ， 在 其 上 县 加 另外 的 包含 专题 信息 的 图 层 。 通 用 底 图 切片 可 
以 用 于 许多 应 用 。 如 果 专 题 图 层 的 变化 不 频繁 ， 或 者 覆盖 区 域 非常 大 ， 则 也 可 以 使 用 切片 方 
式 。 例 如 ， 如 果 使 用 Firebug 等 开发 者 工具 来 深入 检查 谷歌 地 图 的 话 , 可 以 看 到 其 底 图 与 专题 
图 层 〈 如 Panoramio 照片 ) 都 是 以 切片 方式 获取 的 ， 如 图 5.2 所 示 。 
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5.2 ”Panoramio 的 照片 专题 图 也 以 切片 的 方式 提供 


5.2 ” 何 时 使 用 地 图 切片 


如 果 希 望 基础 底 图 能 够 快速 漫游 ， 或 者 同时 有 几 十 个 并 发 用 户 ， 这 时 应 该 为 底 图 创建 切 
片 缓存 。 如 果 专 题 图 层 中 地 物 要 素 的 空间 位 置 与 属性 信息 不 经 常 变换 ， 那 么 也 可 以 创建 切片 
缓存 。 

但 不 管 是 那 种 情况 ， 必 须 了 解 到 切片 缓存 代表 着 切片 创建 时 该 时 刻 点 的 地 图 快照 。 说 得 
难听 的 话 ， 当 后 端 数据 发 生变 化 时 ， 这 些 切片 不 会 自动 更 新 ， 是 一 些 “ 死 图 片 ”。 为 了 更 新 
地 图 ， 切 片 地 图 服务 提供 者 必须 定期 创建 新 的 切片 。 对 于 那些 大 规模 的 切片 缓存 ， 有 时 管理 
员 只 针对 变换 领域 更 新 切片 ， 而 不 是 重建 整个 地 图 范围 的 所 有 切片 。 而 这 又 需要 记录 哪些 地 
方 进行 过 编辑 ， 或 比较 几 个 版 本 的 数据 。 

确定 Web GIS 系统 是 否 需 要 创建 自己 的 地 图 切片 ， 需 要 考虑 以 下 几 个 方面 。 


5.2.1 是 否 有 满足 需求 的 切片 地 图 


创建 切片 底 图 需要 大 量 丰富 的 数据 、 高 端的 地 图 制作 软件 和 制图 技能 ， 以 及 潜在 的 大 量 
时 间 和 磁盘 空间 。 正 是 由 于 存在 这 些 挑 战 ， 通 用 的 Web 混搭 常常 使 用 他 人 创建 的 地 图 切片 。 
如 果 想 没有 任何 限制 的 自由 与 免费 使 用 ， 那 么 OpenStreetMap 是 个 最 佳 选择 。 而 对 于 谷歌 、 
微软 或 ERSRI 的 切片 地 图 ， 则 根据 你 的 地 图 的 性 质 (商业 或 不 以 芥 利 为 目的 ) ， 以 及 多 少 人 
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使 用 你 的 应 用 程序 , 确定 是 免费 还 是 付费 使 用 。 而 其 他 一 些 公司 , 例如 CloudMade 和 MapBox， 
则 以 OpenStreetMap 数据 为 基础 提供 他 们 自己 版 本 的 切片 。 

如 果 决 定 创建 自己 的 基础 底 图 ， 那 么 曾经 设计 过 多 比例 尺 地 图 的 有 经 验 的 制图 人 员 是 必 
不 可 少 的 。 在 每 个 比例 尺 下 ， 地 图 都 应 该 有 合适 的 符号 、 颜 色 以 及 相应 的 详细 程度 。 仅 仅 为 
地 图 所 有 不 同 的 比例 尺 创建 注 记 就 是 一 项 令 人 望 而 生 基 的 任务 。 此 外 ， 如 果 在 底 图 中 包含 卫 
星 或 航空 影像 ， 那么 制图 人 员 还 需要 另外 再 单独 制作 一 组 切片 ， 因为 需要 不 同 的 颜色 与 符号 。 


5.2.2 投影 


要 创建 切片 地 图 可 以 使 用 任何 坐标 系 。 但 是 ， 如 果 准 备 将 自己 的 地 图 切片 车 加 在 
OpenStreetMap 或 谷歌 、 微 软 、ERSRI 的 切片 地 图 上 ， 则 必须 将 珍贵 的 GIS 数据 转换 到 Web 
墨 卡 托 投 影 。 该 投影 创建 的 目的 仅仅 是 方便 将 整个 世界 镶嵌 为 一 组 正方 形 切片 。GIS 纯粹 主 
义 者 拒绝 接受 该 投影 方式 ， 并 预测 这 将 无 法 得 到 大 规模 认可 , 但 事实 与 他 们 的 期 待 大 相 径 庭 。 

Web 墨 卡 托 投影 在 很 长 一 段 时 间 内 并 没有 被 EPSG 的 投影 数据 库 所 接纳 。EPSG 认为 它 
不 能 算 作 科学 意义 上 的 投影 ,所 以 只 是 给 了 一 个 EPSG: 900913 的 标号 , 这 个 标号 游离 在 EPSG 
常规 标号 范围 之 外 。 因此 对 于 一 些 老 的 软件 或 API, 可 能 使 用 了 该 代码 或 其 他 代码 。 直到 2008 
年 ，EPSG 才 忱 然 明白 : 不 管 椭 球 体 还 是 球体 ， 其 实 都 是 对 地 球 的 模拟 ， 只 是 精确 程度 上 的 差 
别 ,没有 本 质 上 的 不 同 。 或 者 是 不 得 不 接受 广泛 的 事实 标准 ，EPSG 接纳 了 这 个 投影 ， 定义 投 
影 坐 标 系 PROJCS 的 名 字 为 “Popular Visualization CRS / Mercator”，SRID 为 EPSG:3785; 
地 理 坐 标 系 GEOGCS 的 名 字 为 “Popular Visualization CRS”，SRID 为 EPSG:4055。 这 些 标 
号 已 经 进入 “正常 范围 ”。 

另外 要 注意 的 是 ， 即 使 使 用 EPSG:3785， 即 Web 墨 卡 托 投影 显示 地 图 ， 也 不 能 在 该 投影 
下 进行 量 测 功能 ， 包 括 线 的 长 度 与 多 边 形 面 积 的 量 算 。 即 使 在 中 纬度 地 区 ， 结 果 都 存在 很 大 
的 偏差 。 要 执行 量 测 功能 ， 最 好 是 将 几何 图 形 投影 到 本 地 坐标 系统 。 

以 下 链接 指向 一 个 小 型 Web 应 用 程序 ， 该 程序 生动 展示 了 Web 墨 卡 托 投影 如 何 影响 距 
离 和 面积 计算 。 

http://links.esri.com/web_mercator_measurements 

图 5.3 显示 了 如 何 使 用 示例 Web 应 用 程序 测量 一 个 小 面 的 面积 。 在 右 侧 面板 上 ， 有 3 
个 不 同 的 坐标 系 用 于 计算 此 面 的 面积 和 周 长 。State Plane Oregon North 的 测量 最 为 准确 ,其 次 
是 UTM Zone 10 测量 , 它们 之 间 只 相差 很 小 的 百分比 。 但 是 , 请 注意 Web 墨 卡 托 投影 的 测量 
值 ， 长 度 测量 为 9600 米 ， 几 乎 是 State Plane Oregon North 值 6763 的 1.5 倍 。 正 如 所 见 ，Web 
墨 卡 托 投影 不 适合 用 于 计算 距离 和 面积 。 其 他 坐标 系 〈 尤 其 是 大 的 面积 〈 洲 ) 等 角 投 影 ) 在 
测量 距离 和 面积 时 同样 不 尽 如 入 意 。 
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Results 

Web Mercator (WKID:102100) 
Area:6714676 square meters 
Length:9600 meters 


State Plane Oregon North 
(WKID:32126) 
Area:3330618 square meters 
Length:6763 meters 


UTM zone 10 (WKID:32610) 
Area:3328669 5qUare meters 
Length:6761 meters 


图 5.3 使 用 Web 墨 卡 托 投影 时 多 边 形 的 面积 不 准确 


ESRI 的 一 篇 名 为 “Measuring distances and areas when your map uses the Mercator 
projection ”的 博客 文章 给 出 了 针对 ArcGIS API for JavaScript 的 解决 方案 ， 使 用 开源 软件 的 也 
可 以 借鉴 其 思路 。 该 博客 文章 的 地 址 如 下 : 

http://blogs.esri.com/esri/arcgis/2010/03/05/measuring-distances-and-areas-when-your-map-us 
es-the-mercator-projection/ 


5.2.3 比例尺 


要 将 地 图 切片 熙 加 在 OpenStreetMap 或 谷歌 、 微 软 、ERSRI 的 ArcGIS 在 线 切片 地 图 上 ， 
除了 保证 使 用 相同 的 投影 之 外 ， 还 需要 确保 比例 尺 序列 一 致 。 不 过 这 些 地 图 的 比例 尺 序列 与 
我 们 通常 见 到 的 地 形 图 比例 尺 序 列 很 不 一 样 ， 我 国 地 形 图 比例 尺 一 般 有 1 : 10000、1 : 50000 
等 。 而 这 些 地 图 的 比例 尺 是 计算 出 来 的 ， 最 小 比例 尺 是 将 整个 世界 放置 在 2X2 的 网 格 中 ， 每 
个 网 格 大 小 是 256 像素 X256 像素 ， 因 此 最 小 比例 尺 为 1 : 295829355.45， 再 放大 一 个 级 别 ， 
那么 比例 尺 在 原 基 础 上 乘 以 2， 结果 为 1 : 147914677.73， 以 此 类 推 。 由 于 这 些 比例 尺 很 不 好 
记忆 ， 也 很 不 好 用 于 交流 ， 并 且 互 联网 地 图 用 户 也 没 必 要 关心 这 么 精确 的 数字 ， 因 此 切片 地 
图 的 比例 尺 通常 简化 成 为 “14 级 ”“15 级 ”“20 级 ”等 。 用 户 只 需要 大 致 了 解 在 全 国 尺 度 、 
省 一 级 尺度 、 城 市 尺度 与 社区 尺度 对 应 的 级 别 即 可 。 

表 5.1 列 出 了 微软 必 应 地 图 各 比例 级 别 对 应 的 比例 尺 。 该 表 中 的 比例 尺 与 地 面 分 辨 率 是 
以 赤道 位 置 来 计算 的 ， 根 据 纬度 不 同 而 会 有 不 同 。 


表 5.1 微软 必 应 地 图 各 比例 级 别 对 应 的 比例 尺 
地 图 高 与 宽 ( 像 素 ) 地 面 分 辩 率 ( 米 /像素 ) 地 图 比例 尺 (96 dpi ) 
78271.5170 1 : 295829355.45 


39135.7585 1 : 147914677.73 
19567.8792 1 : 73957338.86 
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( 续 表 ) 
级 别 地 图 高 与 宽 〈 像 素 ) 地 面 分 辩 率 ( 米 /像素 ) 地 图 比例 尺 96 dpi) 


4 4096 9783.9396 1 : 36978669.43 
3 8192 4891.9698 : 18489334.72 
6 16384 2445.9849 : 9244667.36 
用 32768 1222.9925 : 4622333.68 
8 65536 611.4962 : 2311166.84 
9 131072 305.7481 : 1155583.42 
10 262144 152.8741 : 577791.71 
11 524288 76.4370 : 288895.85 
设 1048576 38.2185 : 144447.93 


5.3 ”创建 与 提供 切片 地 图 服务 的 策略 


地 图 切片 一 般 都 采用 简单 的 文件 夹 结构 ， 以 便 提供 服务 。 然 而 ， 由 于 切片 数量 非常 多 ， 
因此 它们 的 管理 变 得 非常 复杂 。 当 前 互联 网 的 切片 地 图 基本 有 如 下 两 种 方式 组 织 : 

(1) 将 切片 图 像 以 文件 夹 的 结构 放 在 服务 器 上 ， 用 户 直接 请 求 文件 。 在 这 种 方法 中 ， 只 
需要 将 单独 的 切片 图 像 组 织 在 代表 比例 级 别 、 行 和 列 的 文件 夹 结构 中 。 很 多 地 图 API 通过 访 
问 包含 代表 级 别 、 行 和 列 结构 的 URL 来 访问 切片 。 例 如 , 当 使 用 Leaflet API 访问 地 图 切片 时 ， 
必须 提供 格式 为 “http: //{s}.somedomain.com/blabla/{z}/{x}/{y}.png” 的 网 址 ， 其 中 z 是 缩放 
级 别 ，x 和 y 分 别 是 列 和 行 。 例 如 其 中 OpenCycleMap 一 个 地 图 切片 的 URL 地 址 如 下 : 

http://a.tile.opencyclemap.org/cycle/10/265/420.png 

(2) 将 切片 以 Web 服务 的 方式 提供 访问 。 在 这 种 方法 中 ， 虽 然 Web 服务 仍然 需要 用 户 
提供 访问 切片 的 具体 缩放 级 别 、 行 与 列 ， 但 是 其 背后 文件 的 组 织 形式 是 看 不 见 的 。 该 方法 比 
直接 使 用 文件 夹 的 方式 相对 稍微 复杂 一 些 ， 因 此 同时 也 会 带 来 延 时 。OGC 的 Web 地 图 切片 
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服务 (Web Map Tiled Service，WMTS) 规范 就 是 按照 这 种 方式 来 提供 切片 服务 的 。 如 果 使 用 
Firebug 或 其 他 开发 者 工具 来 查看 百度 地 图 的 话 ， 就 可 以 看 到 该 模式 。 例 如 ， 百 度 地 图 的 URL 
如 下 : 
http://onlinel.map.bdimg.comtile/?qt=tile&x=793&y=293&z=12&styles=pl&udt=20150305 
&scaler=1 
虽然 通过 仔细 分 析 ， 可 以 看 到 缩放 级 别 、 行 与 列 参数 ， 但 并 不 能 知道 百度 地 图 在 后 台 是 
如 何 组 织 地 图 切片 的 。 


5.3.1 创建 切片 地 图 的 策略 


如 果 地 图 范围 覆盖 广 ， 例 如 一 个 省 或 国家 ， 那 么 大 比例 尺 中 地 图 切片 的 数量 非常 巨大 。 
然而 具有 讽刺 意味 的 是 ， 在 大 比例 尺 下 ， 很 多 地 图 切片 包含 的 信息 却 非常 少 。 例 如 在 1:2250 
比例 尺 下 ， 居 民 区 附近 的 地 图 切片 包含 了 丰富 的 有 用 的 信息 ， 但 是 如 果 漫 游 到 沙漠 或 海洋 地 
区 ， 那 么 切片 就 很 可 能 完全 是 空 的 ， 没 有 任何 有 用 的 信息 。 那 么 我 们 是 否 还 有 必要 花费 大 量 
的 时 间 创 建 并 用 上 千 MB 的 磁盘 空间 来 存储 它们 呢 ? 

对 于 这 种 情况 ， 我 们 希望 能 找到 某 种 按 需 创建 切片 的 软件 ， 也 就 是 说 ， 在 用 户 第 一 次 访 
问 该 区 域 时 创建 切片 。 第 一 个 漫游 到 该 地 区 的 用 户 需 要 等 待 服务 器 创建 切片 ， 但 是 接 下 来 的 
用 户 就 不 需要 等 待 了 。 这 样 一 来 ， 那 些 受 欢迎 的 地 区 有 地 图 切片 ， 那 些 从 来 没 人 访问 的 地 区 
就 不 需要 创建 与 存储 切片 。 显 然 ， 这 种 方法 的 有 效 性 基于 服务 器 的 绘制 地 图 切片 的 速度 。 

另 一 种 方案 是 使 用 “没有 数据 ”图 片 表明 某 些 地 区 没有 切片 。 尽 管 地 图 管理 人 员 常 常 不 
愿 这 么 做 ， 但 是 在 实际 使 用 过 程 中 ， 当 用 户 看 到 该 图 片 时 ， 都 只 会 责怪 自己 放大 太 多 ， 而 不 
会 埋怨 管理 员 为 什么 不 提供 该 比例 尺 下 的 地 图 。 

最 好 的 方法 应 当 是 事先 创建 最 感 兴趣 地 区 的 地 图 切片 ， 对 于 不 感 兴趣 的 区 域 ， 要 么 按 需 
创建 切片 ， 要 么 提供 “没有 数据 ”图 片 。 虽 然 作 为 一 个 地 理学 家 ， 可 能 不 太 愿意 把 一 些 地 方 
归 为 “不 感 兴趣 ”区 域 ， 但 严酷 的 事实 是 ， 并 不 是 所 有 的 地 图 切片 都 会 有 均等 的 访问 量 。 有 
研究 表明 ， 互 联网 地 图 用 户 的 访问 集中 在 大 城市 、 海 边 和 交通 走廊 。 近 期 来 自 社交 媒体 的 反 
馈 ， 如 地 理 微 博 和 Flickr 照片 数据 集 ， 更 能 准确 地 揭示 了 地 图 用 户 最 感 兴趣 地 区 。 不 过 要 说 
明 的 是 ， 我 们 这 里 讨论 的 是 通用 用 途 的 基础 底 图 ， 而 对 于 那些 专业 类 型 的 地 图 ， 例 如 矿产 勘 
查 和 野生 动物 保护 ， 可 能 有 截然 不 同 的 使 用 模式 。 

上 述 方式 要 求 切片 创建 软件 具有 允许 指定 部 分 区 域 的 能 力 。 大 多 数 软件 仅仅 允许 指定 一 
个 矩形 的 子 区 域 , 但 是 像 海边 、 城 市 等 互联 网 地 图 用 户 所 感 兴趣 的 区 域 却 通常 不 是 矩形 区 域 。 
因此 有 时 需要 使 用 一 系列 的 矩形 区 域 。 


5.3.2 ”使 用 开源 软件 创建 切片 


当前 各 种 FOSS 软件 中 的 一 个 基本 工具 就 是 创建 网 络 切片 地 图 工具 。 其 中 比较 方便 的 是 
GeoWebCache， 因 为 它 集 成 在 GeoServer 中 。 其 他 还 有 TileCache 与 TileStache 等 。 
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Mapnik 库 是 一 个 可 为 Python 与 其 他 语言 调用 的 C++ 编写 的 自由 及 开放 源 代码 软件 ， 可 
用 于 创建 地 图 切片 。Mapnik 是 一 个 高 效 泻 染 引擎 ， 其 中 包含 了 常用 WMS 图 层 中 没有 的 高 级 
绘图 选项 。 虽然 Mapnik 的 使 用 不 太 方便 ， 通 常 需要 一 些 Linux 的 知识 以 及 一 些 实验 与 犯错 ， 
然而 以 利 为 目的 Mapbox 公司 最 近 发 布 了 一 个 名 为 TileMill 开放 源码 的 程序 ， 可 以 在 Mac 和 
Windows 上 运行 ， 以 Mapnik 为 底层 ,提供 了 一 个 漂亮 的 窗口 界面 ， 从 而 简化 了 制图 过 程 。 在 
本 章 的 第 2 个 实践 中 ， 将 介绍 使 用 TileMill 来 创建 费城 的 切片 地 图 。 


5.4 实践 8: 使 用 GeoWebCache 创建 切片 


如 果 对 于 在 WMS 中 设置 的 图 层 与 符号 均 感到 满意 ， 但 希望 提供 响应 速度 ， 以 及 支持 更 
多 的 并 发 用 户 ， 那 么 则 可 以 考虑 使 用 GeoWebCache 来 创建 地 图 切片 。 主 要 是 因为 
GeoWebCache 完全 集成 在 GeoServer 中 。 在 本 实践 中 , 将 介绍 如 何 使 用 GeoWebCache 来 为 实 
践 7 中 发 布 的 NeighborhoodMap 图 层 组 WMS 服务 创建 切片 地 图 服务 。 

(1) 准备 工作 。 

启动 GeoServer， 并 打开 GeoServer 的 Web 管理 页 面 。 

使 用 OpenLayer 预览 webgis: NeighborhoodMap 图 层 组， 进行 放大 、 缩 小 以 及 漫游 等 地 图 
操作 ， 注 意 观 察 性 能 以 及 地 图 的 显示 。 可 以 观察 到 每 次 漫游 时 ， 标 注 都 存在 重新 定位 的 现象 ， 
表明 没有 使 用 地 图 切片 。 

(2) 创建 地 图 切片 。 

在 GeoServer 的 Web 管理 页 面 窗口 的 左边 单 击 “Tile Caching” 中 的 “Tile Layers” 连 接 ， 
在 右边 窗口 进入 Tile Layers 页 面 。 

在 Tile Layers 页 面 中 ， 单 击 “webgis:NeighborhoodMap” 连 接 ， 进 入 “图 层 组 ”页 面 。 

在 “图 层 组 ”页 面 中 滚动 鼠标 ， 定 位 到 “Tile cache configuration” 部 分 。 通 过 该 部 分 的 
参数 配置 图 层 的 缓存 。 由 于 是 从 “Tile Layers” 连 接 进来 的 ， 因 此 自动 选择 为 图 层 组 创建 缓冲 
切片 。 如 果 不 进行 进一步 的 操作 ， 那 么 GeoServer 将 按 需 创建 缓存 切片 。 但 是 我 们 需要 的 不 
是 按 需 创建 ， 而 是 预先 创建 。 

在 GeoServer 的 Web 管理 页 面 窗口 的 左边 ， 再 次 单 击 “Tile Caching” 中 的 “Tile Layers” 
连接 , 然后 在 右边 窗口 Tile Layers 页 面 中 的 webgis:NeighborhoodMap 行 单 击 “Seed/Truncate” 
连接 ， 将 打开 一 个 新 的 窗口 。 

在 新 窗口 中 ， 按 图 5.4 设置 “Create a new task” 表 单 。 

然后 选择 底部 的 “Submit”， 页面 将 进入 执行 任务 监控 页 面 ， 而 GeoServer 则 在 后 台 针 对 
不 同比 例 尺 绘制 地 图 。 

等 待 大 约 30 秒 钟 以 后 ， 单 击 “Refresh list” 连 接 ， 可 以 看 到 图 5.5 所 示 的 进度 显示 ， 告 
诉 已 进行 多 长 时 间 ， 估 计 还 需要 多 长 时 间 。 当 单 击 “Refresh list” 连 接 后 ， 该 进度 统计 列表 消 
失 时 ， 表 示 地 图 切片 已 经 创建 完成 。 
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[create a new task: 


Number of tasks to use: (01 v 


Type of operation: Seed - generate missing tiles Y 
Grid Set: EPS6:900913 Y 

Format: image/png ~ 

Zoom start: 00v 

Zoom stop: il6v 


Bounding box: 
These are optional, approximate values are fine. 


Submit 


5.4 填写 创建 地 图 切片 的 参数 


List of currently executing tasks: 


Id Layer Status Type Estimated # of tiles Tiles completed Timeelapsed Time remaining Tasks 
2 webgis:NeighborhoodMap RUNNING SEED 5,074 2,368 29seconds 33seconds (Task 1 of1) [till Task| 


Refresh list 


图 5.5 地 图 切片 任务 执行 统计 列表 
(3) 预览 切片 地 图 。 
在 GeoServer 的 Web 管理 页 面 窗 口中 单 击 “Tile Layers” 连 接 ， 进 入 Tile Layers 页 面 。 
然后 从 webgis:NeighborhoodMap 行 的 预览 下 拉 列 表 框 中 选择 “EPSG:900913 /png”， 如 图 5.6 
所 示 。 


webgis:Neighborhoods Select One 


webgis:NeighborhoodMap Select One 

Select One 
|EPS6:4326 / jpeg 
|EPS6:4326 / png 
EPS6:900913 / jpeg 
topp:tasmania_state_boundaries EPS6:900913 / png 


topp:tasmania_water_bodies 


图 5.6 使 用 “EPSG:900913 /png” 方 式 预览 地 图 


在 新 的 地 图 预览 窗口 中 ， 对 地 图 进行 放大 、 缩 小 与 漫游 等 操作 ， 可 以 发 现 无 须 等 待 而 地 
图 立即 显示 ， 而 且 当 漫游 时 标注 并 没有 改变 位 置 ， 表 明 已 经 利用 切片 缓存 。 

请 注意 ， 确 保 使 用 的 是 “Tile Layers ”预览 ， 而 不 是 “Layer Preview” 预 览 。 切 片 图 层 预 
览 使 用 的 URL 稍微 有 些 不 同 ， 以 表明 需要 使 用 切片 缓存 。 

虽然 使 用 切片 缓存 改善 了 性 能 , 但 是 也 正如 大 家 注意 到 的 , 地 图 中 存在 重复 标注 的 现象 。 
因为 每 个 地 图 切片 并 不 清楚 相 邻 切片 中 的 标注 ， 因 此 在 生成 地 图 切片 时 很 难 避免 重复 标注 。 
要 缓解 该 问题 ， 切 片 生成 软件 通常 在 比 切片 更 大 的 范围 内 绘制 地 图 ， 然 后 再 将 其 切 开 为 单独 
的 切片 。GeoWebCache 将 该 较 大 区 域 称 为 “metatile 〈 元 切片 ) ”， 而 ESRI 称 为 “supertile 
〈 超 级 切片 ) ”。 可 以 在 GeoWebCache 调整 元 切片 的 大 小 进行 试验 ， 可 以 看 到 ， 标 注重 复 现 


92 


第 5 章 切片 地 图 - 


象 得 到 了 很 大 的 改善 ， 但 是 仍然 在 元 切片 的 边界 处 出 现 同名 标注 。 这 是 因为 ， 当 对 元 切片 进 
行 标注 时 ， 标 注 放 置 位 置 引擎 未 识别 出 相 邻 元 切片 上 的 标注 。 事 实 上 ， 标 注 引 擎 可 能 正在 努 
力 使 元 切片 中 包含 尽 可 能 多 的 标注 ， 进 而 在 边 附 近 放 置 了 一 些 标注 。 在 相 邻 的 元 切片 上 可 能 
发 生 同 样 的 情况 ， 使 得 元 切片 边界 附近 出 现 同名 标注 。 下 一 个 实践 将 介绍 的 TileMill 也 有 元 
切片 的 概念 。 


5.5 实践 9: 使 用 TileMill 创建 切片 


在 该 实践 中 ， 将 介绍 如 何 使 用 Mapnik (TileMill 是 该 库 的 封装 ) 来 创建 费城 通用 的 地 图 
切片 。 本 书后 面 内 容 中 的 相关 专题 图 层 可 登 加 在 该 基础 底 图 上 。 这 里 所 使 用 的 数据 是 第 3 章 
中 处 理 好 的 数据 。 如 果 是 遵循 本 书 给 出 的 操作 ， 那 么 数据 位 于 “Ci\Data\Philadelphia” 文 件 夹 
下 ， 使 用 的 是 EPSG:3857 投影 。 

Mapnik (www.mapnik.org) 是 一 常用 的 地 图 切片 生成 FOSS 软件 。Mapnik 集成 了 抗 锯齿 
功能 (通过 混合 物体 边缘 附近 的 前 景 像素 和 背景 像素 而 使 人 眼看 到 的 边界 更 平滑 的 一 种 图 形 
技术 ) 。 它 并 不 依赖 任何 其 他 GIS 软件 框架 ， 也 正 因为 这 一 特点 ， 从 而 改善 了 性 能 。Mapnik 
支持 多 种 类 型 的 文件 形式 与 空间 数据 库 的 数据 。 

要 使 用 Mapnik， 首 先 要 定义 一 系列 的 数据 源 ， 然 后 将 它们 与 一 组 样式 规则 联系 起 来 。 可 
使 用 XML 文件 定义 样式 规则 ， 也 可 以 使 用 Python 等 编程 语言 编写 。 一 旦 定义 了 数据 源 与 样 
式 规 则 ， 便 可 使 用 Mapnik 输出 地 图 图 片 。 

对 于 初学 者 特别 是 编程 技能 弱 的 人 来 说 , 使 用 Mapnik 有 一 定 的 难度 。 不 过 可 以 通过 有 图 
形 界面 的 TileMill 来 帮助 使 用 Mapnik。 在 TileMill 中 ， 不 再 使 用 XML 或 代码 来 定义 样式 ， 
而 是 使 用 CartoCSS。CartoCSS 是 一 种 语法 类 似 CSS (Cascading Style Sheets， 层 肢 样 式 表 ， 

-种 对 网 页 进行 设计 的 样式 语言 ) 的 制图 样式 描述 语言 。 如 果 熟 悉 CSS 的 话 ， 尽 管 二 者 所 包 
含 的 要 素 、 属 性 等 内 容 和 含义 完全 不 同 ， 那 么 也 还 是 会 比较 容易 理解 CartoCSS 这 种 对 地 图 进 
行 样式 设计 的 语言 。 

虽然 TileMill 是 自由 与 开源 的 软件 , 但 它 是 由 Mapbox 开发 , 并 将 其 集成 到 公司 的 商业 地 
图 切片 服务 中 。 当 使 用 TileMill 输出 切片 时 ， 结 果 是 以 .mbtiles 为 后 级 名 的 文件 。 如 果 不 想 将 
其 发 布 者 Mapbox 的 服务 器 上 ， 可 以 将 该 .mbtiles 文件 解压 为 一 系列 的 切片 文件 ， 然 后 将 其 发 
布 到 自己 的 Web 服务 器 上 。 


5.5.1 使 用 TileMill 设计 地 图 


(1) 下 载 与 安装 TileMill。 
从 https://www.mapbox.com/tilemill/ 下 载 TileMill, 或 者 直接 使 用 下 载 文件 中 Tools 文件 夹 
下 的 TileMill-v0.10.1-Setup.exe。 使 用 默认 设置 安装 TileMill。 在 安装 TileMill 时 可 以 一 并 安装 
Mapnik 。 
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(2) 在 TileMill 中 创建 项 目 。 
从 Windows 的 启动 菜单 中 ， 选 择 “TileMill > Start TileMill”， 启 动 TileMill。 
选择 “New Project” 创 建 一 个 新 的 项 目 , 按 图 5.7 设置 新 项 目的 基本 设置 , 然后 单 击 “Add” 
按钮 。 


New project 
Project information 
*Filename PhillyBasemap 
Name PhillyBasemap 
Description ”费城 通用 基础 底 图 
Imageformat png(24-bit) [x 


Defauk data OD 


图 5.7 设置 新 项 目的 信息 


如 果 是 要 创建 和 感 影像 的 切片 ， 那 么 为 了 减 小 切片 大 小 ， 可 选择 jpeg 作为 切片 的 格式 。 
由 于 这 里 使 用 的 是 矢量 地 图 ， 因 此 PNG 格式 更 合适 。 

(3) 设置 地 图 背景 颜色 。 

在 项 目 列表 中 单 击 PhillyBasemap， 进 入 地 图 编辑 器 中 。 此 时 地 图 预览 显示 在 左边 ， 右 边 
显示 的 是 CartoCSS 代码 。 每 当 保存 CartoCSS 代码 时 ， 地 图 更 新 一 次 。 

在 CartoCSS 代码 窗口 中 ， 将 默认 的 地 图 背景 颜色 修改 为 白色 ， 代 码 如 下 : 


Map{ 
background-color: #FFFFFF:; 


b 


单 击 “ 保 存 ” 按 钮 ， 地 图 预览 窗口 的 背景 颜色 立即 更 新 为 白色 。 

接 下 来 ， 就 需要 增加 图 层 并 设置 它们 的 样式 。 

(4) 增加 图 层 。 

在 TileMill 窗口 最 左边 的 工具 条 的 最 下 面 单 击 “ 图 层 ” 按 钮 ， 弹 出 图 层 管理 器 小 窗口 ， 
在 该 窗口 中 单 击 “Add Layer” 按 钮 。 该 过 程 如 图 5.8 所 示 。 
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Layers + Audeyer || x 


图 5.8 通过 “图 层 ” 按 钮 打开 图 层 管理 器 


单 击 “Add Layer” 按 钮 后 ， 弹 出 的 是 Add Layer 窗口 。 在 该 窗口 中 ， 增 加 city_limits.shp 
文件 作为 新 图 层 ， 并 按 图 5.9 设置 其 他 参数 。 


Add layer | 


Fle 自 sqire 三 postGIS 


ID Citylimit 
Class CityLimit 


* Datasource CA\Data\philadelphia\city limits.shp [ Browse | 
SRS 900913 Y *proj=merc +a=6378137 +b=6378137 +lat ts=0.0 +| 


Advanced 


图 5.9 在 Add Layer 窗口 中 设置 图 层 基 本 信息 


TileMill 通过 Class 与 ID 的 概念 ， 允 许 用 户 设置 样 式 规则 的 不 同 颗粒 度 级 别 。 例 如 ， 如 
果 想 设置 所 有 道路 的 通用 规则 ， 那 么 可 为 所 有 道路 设置 一 类 别 ， 即 Class。 如 果 想 为 某 一 子 类 
型 的 道路 (例如 主干 道 ) 设置 更 为 具体 的 规则 ， 则 可 为 该 子 类 型 使 用 一 个 ID。 由 于 这 里 只 需 
要 为 城市 边界 图 层 设 置 一 个 样式 ， 因 此 将 ID 与 Class 设置 为 同样 的 名 称 来 。 事 实 上 ， 为 了 方 
便 ， 本 实践 中 每 个 图 层 的 ID 与 Class 都 使 用 相同 的 名 称 。 

此 外 ， 当 使 用 EPSG:3857 投影 的 数据 时 ,必须 将 空间 参考 设置 为 900913 投影 代码 。 前面 
已 经 介绍 了 这 两 个 代码 的 投影 是 一 致 的 。 

完成 设置 新 图 层 的 基本 信息 后 ， 单 击 “Save & Style” 按 钮 。 

(5) 放大 到 图 层 范围 。 

TileMill 中 默认 起 始 视 图 使 用 的 是 第 三 级 ， 对 于 费城 来 说 ， 比 例 尺 太 小 。 需 要 在 图 层 管理 
器 中 单 击 “Zoom to extent” 按 钮 ， 将 地 图 放大 到 城市 边界 图 层 的 范围 。 

(6) 设置 图 层 样式 。 

在 CartoCSS 代码 窗口 中 使 用 如 下 代码 ， 设 置 城市 边界 图 层 的 样式 。 
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#CityLimit f 
line-color:#88789e; 
line-width:3; 
} 
编辑 完成 后 进行 保存 ， 此 时 TileMill 界面 如 图 5.10 所 示 。 
TileMill - -本 到 
一 PhillyBasemap 


国 
图 5.10 设置 了 城市 边界 图 层 样式 后 的 地 图 显示 


(7) 设置 waterways.shp 图 层 的 样式 。 
在 地 图 中 增加 waterways.shp 图 层 ， 将 其 样式 设置 为 如 下 代码 。 


#Waterways { 
line-width:1; 
line-color:#89aceb; 

} 


(8) 设置 natural.shp 图 层 样式 。 
在 地 图 中 增加 natural.shp 图 层 ， 将 其 样式 设置 为 如 下 代码 。 


#Natural { 
[type='park']{ 
polygon-opacity: 1; 
polygon-fill:#ae8; 


h 

[type='riverbank']{ 
polygon-opacity: 1; 
polygon-fill:#89aceb; 

} 


[type='water]{ 
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polygon-opacity: 1; 
polygon-fill:#89aceb; 


} 


从 上 面 的 代码 可 以 看 出 ， 如 果 只 想 显 示 部 分 要 素 ， 则 可 增加 过 滤器 。 在 natural.shp 中 还 
包含 许多 其 他 类 型 的 的 要 素 ， 上 述 代码 指定 只 显示 了 公园 、 河 堤 与 水 体 要 素 。 

(9) 设置 Neighborhoods.shp 图 层 样式 。 

在 地 图 中 增加 Neighborhoods.shp， 并 将 其 样式 设置 为 如 下 代码 。 


#Neighborhoods[zoom>12] { 
text-name:[INAME]; 
text-face-name:"Arial Black"; 
text-fill:#88789e; 
text-size: 12; 
text-character-spacing: 2; 
text-transform: uppercase; 

k 


在 上 述 代码 中 ,我 们 只 指定 了 文字 的 属性 。 因 此 社区 的 界线 将 被 隐藏 ， 只 显示 社区 名 称 。 

当 在 TileMill 中 标注 一 图 层 时 ， 需 要 指定 包含 标注 文本 所 在 的 字段 。 对 于 本 社区 图 层 ， 
依据 的 是 NAME 字段 来 标注 ， 因 此 设置 了 “text-name:[NAME]”。 

此 外 ， 上 述 代码 还 使 用 了 缩放 级 别 过 滤器 ， 将 样式 的 作用 范围 限制 在 特定 的 地 图 缩放 级 
别 上 。 在 上 面 的 例子 中 ， 样 式 块 中 定义 的 样式 只 在 地 图 缩放 到 12 级 以 上 时 发 挥 作用 。 

在 地 图 预览 窗口 中 缩放 地 图 ， 确 保 地 图 缩放 到 12 级 以 上 时 标注 才 显 示 。 如 图 5.11 所 示 。 


PP 
-|+|z -+z 
| zoom'3 | ALLEGHANY WEST 
EFIELD 
STRAWSERRY MANSION 
Re NORTH CENT 
BREWwERYTOWN 
PoPLAR-LUI 
二 FAIRMOONT-SPRING Gan 


图 5.11 使 用 缩放 级 别 过 滤器 


97 


至 Web GIS 原理 与 应 用 开发 


(10) 设置 主要 道路 的 样式 。 
在 地 图 中 增加 roads.shp 图 层 ， 将 其 ID 与 Class 都 设置 为 MajorRoads， 样 式 代码 如 下 。 


上 面 的 设置 仅 符号 化 了 主要 道路 。 在 OpenStreetMap 中 包含 了 许多 不 同类 型 的 道路 ， 可 
以 使 用 不 同 的 方式 进行 样式 化 。 我 们 这 里 使 用 的 方式 是 ， 为 了 显示 次 要 道路 ， 重 新 加 入 道路 
图 层 ， 并 将 其 放置 在 主要 道路 之 下 。 这 样 虽然 引入 了 一 些 见 余 ， 但 是 代码 显得 很 简单 。 


(11) 设置 其 他 道路 的 样式 。 
在 地 图 中 重新 增加 roads.shp 图 层 , 这 次 将 其 ID 与 Class 都 设置 为 Roads, 样式 代码 如 下 。 


当地 图 放大 到 14 级 以 上 时 ， 将 显示 路 名 标注 。 
(12) 设置 铁路 图 层 的 样式 。 
在 地 图 中 增加 railways.shp， 其 样式 代码 如 下 。 


#Railroads{ 
line-width:1; 
line-color:#d2bcb0; 


#Railroads[zoom>15] { 
::line, ::hatch { line-color: #d2bcb0; } 
:line { line-width:1; } 
:hatch 了 
line-width: 4; 
line-dasharray: 1, 24; 
b 
} 
(13) 调整 图 层 顺序 。 


在 图 层 管理 器 中 ， 将 鼠标 移动 到 某 图 层 行 的 最 前 面 的 图 标 上 ， 按 住 鼠标 左 键 ， 便 可 上 下 


移动 图 层 顺序 。 将 地 图 中 按 图 5.12 调整 图 层 顺 序 。 


图 5.12 地 图 中 图 层 的 顺序 
至 此 ， 我 们 就 完成 了 地 图 设计 。 下 一 步 是 生成 地 图 切片 。 


5.5.2 ”输出 与 提取 地 图 切片 


Layers + Adadbyer 目 x | 
a #Neighborhoods.Neighborhoods 于 QO 
a #CityLimit.CityLimit 于 QO 
 #MajorRoads.MajorRoads 于 QO 
” #Roads.Roads 于 QOY 站 
. #Railroads.Railroads QO 
 *#Waterways Waterways QO 
碟 #Natural.Natural 于 QO 


一 旦 完成 了 地 图 的 设计 ， 而 且 地 图 在 各 个 比例 尺 下 的 显示 都 满足 要 求 ， 便 可 生成 地 图 切 


病征 
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(1) 设置 元 切片 的 缓冲 区 大 小 。 
为 了 避免 重复 标注 以 及 很 长 的 标注 被 截断 ， 可 以 在 CartCSS 代码 中 的 地 图 的 样式 增加 一 
个 设置 元 切片 的 缓冲 区 大 小 ， 修 改 后 的 内 容 如 下 。 


Map { 
background-color: #FFFFFF; 
buffer-size: 512; 

} 


(2) 选择 输出 地 图 切片 的 格式 。 

在 TileMill 中 单 击 “Export” 按 钮 ， 选 择 其 中 的 MBTiles。MBTiles 是 MapBox 的 一 种 将 
整个 切片 存储 为 一 个 SQLite 数据 库 的 格式 。 我 们 最 后 需要 将 其 解压 为 一 个 一 个 独立 的 PGN 
图 片 。 

(3) 设置 地 图 切片 的 范围 与 中 心 点 。 

在 左边 的 地 图 视图 中 ,将 地 图 放大 到 费城 基本 填充 地 图 窗口 。 然 后 按 住 Shift 键 与 鼠标 左 
键 并 拖 动 鼠标 ， 绘 制 一 个 覆盖 费城 城市 边界 的 矩形 。 确 保 地 图 放大 到 一 个 合理 的 大 比例 尺 下 ， 
避免 创建 很 多 周边 空白 的 图 像 。 

然后 使 用 鼠标 右键 在 地 图 中 部 单 击 ， 设 置 中 心 点 。 

这 时 地 图 视图 如 图 5.13 所 示 。 


图 5.13 设置 地 图 切片 的 范围 与 中 心 点 


(4) 设置 地 图 切片 级 别 。 
在 右边 的 窗口 中 ， 将 缩放 滑动 条 设置 为 0-17， 如 图 5.14 所 示 。 在 移动 滑动 条 时 ,注意 观 
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察 切 片 数 量 的 变换 ， 特 别 是 在 大 比例 尺 级 别 下 时 。 
zoom Egg 


21,839 ties (10 MB-+) 


图 5.14 通过 缩放 滑动 条 设置 切片 级 别 


对 于 其 他 参数 不 需要 修改 。 
(5) 输出 地 图 切片 。 

在 右边 的 窗口 中 单 击 “Export” 按 钮 ， 显 示 “View exports” 窗 口 。 在 该 窗口 中 ， 可 观察 
到 切片 生成 进度 。 

为 了 能 从 .mbtiles 文件 中 提取 地 图 切片 ， 需 要 使 用 名 为 MBUtil 的 工具 。 

(6) 安装 MBUtil。 

从 “https://github.com/mapbox/mbutil” 下 载 ZIP 格式 的 文件 , 或 直接 使 用 下 载 文件 的 Tools 
文件 夹 中 mbutil-master.zip 文件 。 

将 其 解压 到 一 个 简单 路 径 中 ， 例 如 “C:mbutil”。 

(7) 确保 已 安装 Python 。 

由 于 MBUtil 需要 Python， 因 此 需要 确定 在 你 的 计算 机 上 是 否 已 经 安装 了 python.exe。 可 
以 查看 是 否 有 类 似 “C:\Python34” 的 文件 夹 。 如 果 没 有 找到 python.exe， 则 可 以 从 python.org 
网 站 下 载 并 安装 Python。 

在 本 实践 中 ， 假 设 Python 的 路 径 为 “C:\Python27\python.exe”。 如 果 读 者 使 用 了 其 他 路 
径 来 安装 Python， 在 后 面 的 使 用 时 ， 请 调整 为 自己 的 python.exe 所 在 路 径 。 

(8) 复制 地 图 切片 。 

在 Windows 的 资源 管理 器 中 ， 进 入 到 “文档 \IMapBox\export ”文件 夹 ， 找 到 
PhillyBasemap.mbtiles 文件 ， 这 就 是 地 图 切片 。 将 其 复制 到 一 个 简单 的 路 径 中 ， 例 如 
Ci\Data\Philadelphia。 

(9) 提取 地 图 切片 。 

打开 一 个 命令 提示 符 ， 输 入 并 执行 如 下 命令 : 

c:\python34\python.exe c:mbutilmb-util ce:\data\Philadelphia\PhillyBasemap.mbtiles c:\data\Philadelphia\ 
PhillyBasemap 

在 上 面 的 命令 行 中 ， 第 一 个 参数 是 Python 的 路 径 ， 第 二 个 参数 是 MBUtil 工具 的 路 径 ， 
第 三 个 参数 是 压缩 的 地 图 切片 的 路 径 ， 最 后 一 个 参数 是 解压 后 切片 存储 的 路 径 。 读 者 可 根据 
实际 情况 调整 路 径 。 解 压缩 完成 后 ， 便 可 在 “C:\Data\Philadelphia\PhillyBasemap” 路 径 中 看 到 

-系列 的 非 压缩 切片 ， 如 图 5.15 所 示 。 
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2 县 philadelphia 
philyBasemap 
PhiladelphiaBaseLayers 


PhiladelphiaElevation 


Vancouver 


mwvaowhwnm- 


inetpub Ce 
KSafeRecycle es 四 v 


mhutil 
19 个 项 目 SS 忆 


图 5.15 解压 缩 后 的 地 图 切片 


5.5.3 发布 与 测试 切片 


仔细 查看 解压 缩 后 的 地 图 切片 , 可 以 看 到 切片 图 像 严 格 按照 “级 别 \ 列 \ 行 ”的 方式 来 组 织 。 
当前 绝 大 多 数 的 地 图 API 都 能 使 用 该 结构 , 因此 需要 做 的 就 是 将 这 些 切片 放置 到 Web 服务 器 
中 。 对 于 Windows 系统 ， 在 计算 机 中 安装 IIS 非常 简单 ， 我 们 这 里 就 以 IIS 为 例 来 发 布地 图 


切片 。 
(1) 将 地 图 切片 发 布 到 IS 中 。 


将 “CANData\Philadelphia\PhillyBasemap ”文件 夹 整体 复制 到 JIS 使 用 的 文件 夹 中 ， 即 


“Ci\inetpub\Wwwwroot” 文 件 夹 。 


在 网 页 浏览 器 中 输入 类 似 “http://localhost/PhillyBasemap/15/9555/12400.png” 的 地 址 ， 查 


看 是 否 能 正确 显示 图 片 ， 如 图 5.16 所 示 。 
12400png (PNG 图 像 , .Xx | 十 - ° Ea 


€ localhos 4 cj 最 ml- 多 | 三 


pa 


图 5.16 直接 通过 地 址 测试 地 图 切片 
(2) 使 用 ArcGIS.com 测试 地 图 切片 。 


下 面 可 以 将 该 地 图 切片 服务 加 入 到 某 一 在 线 地 图 中 ， 以 便 在 地 图 环境 中 测试 。 这 是 


有 介绍 


ArcGIS.com 地 图 查看 器 , 它 是 基于 浏览 器 的 Web 地 图 制作 软件 。 当 用 于 试验 或 与 公众 分 享 地 
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图 时 是 免费 使 用 的 。 


在 浏览 器 地 址 栏 中 输入 “http:/www.arcgis.com/home”， 然 后 单 击 “ 创 建 地 图 ”连接 ， 进 
入 “我 的 地 图 ”页 面 。 在 窗口 的 地 图 部 分 已 经 加 入 了 ESRI 提供 的 地 图 。 

在 工具 栏 中 单 击 “ 添 加 ”按钮 ， 选 择 其 中 的 “从 Web 添加 图 层 ”。 如 果 工 具 栏 中 没有 “ 添 
加 ”按钮 ， 则 需要 先 选择 页 面 中 右上 角 的 “修改 地 图 ”。 

在 “从 Web 添加 图 层 ” 对 话 框 中 ， 首 先 在 数据 类 型 中 选择 “切片 图 层 ”， 将 URL 设置 
为 “http://localhost/PhillyBasemap/{level}/{col}/ {row}.png”。 接 着 设置 标题 与 制作 者 名 单 。 然 
后 单 击 “ 设 置 切片 范围 ”按钮 ， 在 新 窗口 中 绘制 一 个 包含 费城 的 矩形 ， 并 不 需要 精确 的 坐标 。 
新 图 层 的 参数 如 图 5.17 所 示 。 

从 Web 添加 图 层 


切片 图 导 URL 忆 渍 包 仿 如 别 
(Wn, hetp//{subOomai 


URL: [http:Wiocslhosyphilvsasem 


回 月 作 因 


ET TT 
|Web GIS 风 与 开 发光 
在 :-75.501 。 在 -74814 
设置 切片 池 转 
上 : 40.273 下 : 39.764 站 


显示 切片 图 层 时 遇 到 是 ?请 将 此 URL 甬 过 "联系 Eemi 计 按 皮 这 给 我 们 ， 以 天 我 人 过 4 站 。 


示 加 图 屋 取消 
5.17 设置 新 图 层 的 参数 


最 后 在 “从 Web 添加 图 层 ” 对 话 框 中 单 击 “ 添 加 图 层 ” 按 钮 ， 返 回 到 地 图 窗口 中 。 这 时 
地 图 窗口 中 加 入 的 已 经 是 我 们 创建 的 费城 地 图 了 ， 如 图 5.18 所 示 。 在 地 图 窗口 中 进行 放大 、 
缩小 与 漫游 操作 ， 进 行 测试 。 应 当 可 以 看 到 地 图 响应 速度 非常 快 。 


文 名 中 坑 志 日 二 看 V) 历史 G) 书 入 (8) 工具 0D) 才 2b(tD) 
| @ AGE - son x\+ 


- =- 
€) wesarcgiscompore/ orb 
ArcGIS ”我 的 地 图 


国 二 lm 仿 | 如 四 


@ 国王 


pviewerhiml Ce- 人 9 三 


© tks 


5.18 ”利用 ArcGIS.com 测试 地 图 切片 
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5.6 习 题 


(1) 阅读 以 下 链接 中 的 内 容 ， 深 入 理解 元 切片 及 其 在 CartoCSS 中 的 使 用 : 

https://www.mapbox.com/tilemill/docs/guides/metatiles/ 

(2) 在 TileMill 中 ， 单 击 左边 工具 条 的 帮助 按钮 打开 帮助 ， 如 图 5.19 所 示 。 通 过 阅读 
帮助 ， 深 入 了 解 CartoCSS 的 应 用 。 


srs surg 
Defauic -proplongiat -egpe=WGS84 +datum=WGSE4 
no_defs 


图 5.19 TileMill 中 的 帮助 
(3) 寻找 $ 个 使 用 切片 地 图 作为 背景 的 在 线 地 图 应 用 。 对 于 每 个 地 图 ， 描 述 地 图 切片 来 
源 及 其 组 织 方式 。 
(4) 利用 在 第 3 章 习题 指定 收集 的 数据 ， 使 用 TileMill 与 CartoCSS 工具 ， 将 其 发 布 为 
切片 地 图 服务 。 
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使 用 Web 地 图 API 
访问 地 图 服务 


从 本 章 可 以 学 习 到 : 

必 Web 地 图 API 

加 使 用 Web 地 图 API 的 基本 步骤 

部 查看 OpenLayers 实例 

使 用 OpenLayers 实现 在 切片 地 图 上 又 加 WMS 


二 Web GIS 原理 与 应 用 开发 


通过 前 面 内 容 的 学 习 ， 大 家 已 经 掌握 了 如 何 创 建 几 种 不 同类 型 的 地 图 服务 ， 包 括 动态 绘 
制 地 图 服务 与 静态 切片 地 图 服务 ， 同 时 也 掌握 了 几 种 预览 这 些 服 务 的 几 种 方式 。 大 家 很 可 能 
会 认为 ， 通 过 预览 机 制 ， 这 些 地 图 服务 既 难 以 共享 ， 用 途 也 不 大 。 为 了 打消 大 家 的 疑虑 ， 在 
介绍 其 他 类 型 的 空间 信息 服务 之 前 ， 有 必要 介绍 Web GIS 的 编程 实现 ， 为 用 户 提供 一 个 包含 
各 图 层 的 地 图 交互 页 面 。 可 使 用 Web 地 图 API 帮助 Web GIS 的 开发 ， 其 中 一 个 最 常用 的 免 
费 开 源 的 API 就 是 OpenLayers。 本 章 将 介绍 OpenLayers 的 基本 使 用 。 

对 于 本 章 的 学 习 , 需要 读者 具有 基本 的 HTML (www.w3schools.com/htmlDEFAULT.asp) 
与 JavaScript (www.w3schools.com/js/DEFAULT.asp〉 知 识 。 对 于 还 没 掌握 这 些 知 识 的 读者 ， 
可 通过 上 述 两 个 网 址 来 学 习 。 


6.1 Web 地 图 API 


API (Application Programming Interface， 应 用 程序 接口 ) 是 编写 程序 的 一 个 框架 ， 包 含 
了 一 组 封装 了 底层 代码 的 类 与 功能 。 例 如 Web 地 图 API 通常 都 包含 表示 地 图 与 图 层 的 类 ， 这 
样 开 发 人 员 就 无 须 编写 显示 交互 地 图 以 及 在 地 图 中 绘制 图 层 这 些 底层 代码 了 。 而 只 需要 创建 

-个 新 的 地 图 对 象 map、 创 建 一 个 新 的 图 层 对 象 layer， 然 后 调用 类 似 map.addLayer (layer) 

的 方法 。 该 API 隐藏 了 地 图 绘制 任务 的 复杂 性 ， 让 开发 人 员 将 注意 力 集中 在 应 用 程序 的 制图 
方面 ， 而 不 是 花费 大 量 的 时 间 研 究 底层 逻辑 。 

API 也 有 许多 不 同 的 类 型 。 通 用 的 API， 如 Java 和 Microsoft .NET 框架 ， 可 以 用 来 编写 
各 种 桌面 、Web 和 移动 平台 的 程序 。 还 有 针对 某 些 产 品 和 功能 ， 构 建 更 加 专业 化 的 API。 例 
如 ， 和 谷歌 的 App Engine、Amazon Web 服务 和 微软 的 Windows Azure， 这 些 都 是 为 专 有 的 云 计 
算 环 境 而 设计 的 。 

在 Web 地 图 方面 , 主要 的 API 有 OpenLayers、Leaflet、 谷歌 Map API 以 及 ArcGIS API for 
JavaScript。 最 后 两 个 API 是 围绕 特定 专 有 平台 设计 的 。 

要 注意 的 是 ，API 并 不 是 一 种 编程 语言 ， 而 只 是 使 用 某 语言 可 调用 的 一 组 类 与 功能 。 
些 API 能 够 被 多 种 语言 调用 ， 而 有 些 只 能 被 某 一 特定 的 语言 所 调用 。 


6.1.1 Web 地 图 API 的 选择 


当 准 备 开 发 一 个 Web GIS 应 用 时 ， 其 中 最 重要 的 一 个 选择 是 使 用 哪个 API。 如 果 应 用 程 
序 的 用 户 很 多 ， 该 决定 将 可 能 影响 随后 多 年 的 专业 方面 的 活动 与 发 展 轨迹 。 

由 于 API 一 般 都 针对 的 是 某 一 种 语言 ， 因 此 API 的 选择 与 开发 语言 和 平台 的 选择 紧密 相 
关 。 开 发 语言 与 平台 决定 了 可 使 用 的 API 的 范围 。 例 如 ， 如 果 应 用 程序 需要 运行 在 Andriod 
平台 的 平板 电脑 上 ， 那 么 首先 要 决定 的 是 要 建立 一 个 完整 的 原生 应 用 程序 ， 还 是 一 个 简单 地 
运行 在 Android 平板 Web 浏览 器 的 程序 。 要 开发 原生 应 用 程序 ， 则 需要 使 用 Java 语言 ， 而 开 
发 基于 浏览 器 的 程序 ， 则 有 更 大 的 灵活 性 ， 可 使 用 JavaScript 与 HTML 来 完成 ， 或 许 采 用 有 
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友好 移动 功能 的 API 〈 换 句 话说 ， 它 支持 触摸 手势 、 根 据 设 备 宽度 自动 调整 大 小 等 ) 。 

从 上 面 这 个 例子 也 可 以 看 出 ， 开 发 人 员 熟 悉 的 开发 语言 与 平台 ， 也 是 选择 API 时 需要 重 
点 考虑 的 。 如 果 有 开发 人 员 熟 悉 Java 或 Objective C， 那 么 选择 开发 原生 应 用 程序 的 可 能 性 就 
更 大 。 然 而 ， 有 了 HTML 和 JavaScript 知识 通常 就 足以 开发 基于 浏览 器 的 应 用 程序 。 大 多 数 
FOSS 的 Web 地 图 API 主要 面向 的 是 HTML 和 JavaScript 方式 , 因此 该 方式 也 是 本 书 的 重点 。 
商业 供应 商 可 能 会 提供 更 多 的 语言 和 平台 的 选择 , 如 ESRI 公司 同时 提供 了 面向 iOS、Android、 
Flex、Silverlight 和 JavaScript 的 ArcGIS API。 然 而 ，， 近 年 来 由 于 HTMLS5 迎头 赶 上 以 及 对 
插件 的 排斥 ， 基 于 插件 的 API (例如 Flex 和 Silverlight)〉 已 经 逐渐 被 抛弃 。 


6.1.2 主要 FOSS 类 型 的 Web 地 图 API 


下 面 列举 的 FOSS 的 Web 地 图 API 都 是 利用 HTML 与 JavaScript 来 构建 基于 浏览 器 的 应 
用 程序 。 


6.1.2.1 OpenLayers 


OpenLayers (www.openlayers.org) 是 一 个 用 于 构建 Web GIS 应 用 程序 的 、 成 熟 的 、 功 能 
丰富 的 JavaScript API。 它 有 详细 的 说 明文 档 和 大 量 的 实例 代码 ， 不 过 有 些 材料 对 于 初学 者 很 
难 理解 。OpenLayers 的 另 一 个 突出 特点 是 有 一 个 大 型 的 开发 者 社区 。 该 社区 在 类 似 GIS Stack 
Exchange 等 论坛 上 提供 了 大 量 的 提示 和 例子 。 在 使 用 OpenLayers 开发 中 遇 到 的 所 有 问题 ， 基 
本 都 会 在 说 明文 档 或 这 些 网 上 讨论 中 找到 答案 。 

OpenLayers 支持 的 地 图 来 源 包括 谷歌 地 图 、Yahoo! 地 图 和 微软 必 应 地 图 等 ， 用 户 还 可 以 
用 简单 的 图 片 地 图 作为 背景 图 ， 与 其 他 的 图 层 在 OpenLayers 中 进行 车 加 。 除 此 之 外 ， 
OpenLayers 实现 访问 地 理 空间 数据 的 方法 都 符合 行业 标准 。OpenLayers 支持 OGC 制定 的 
WMS 和 WFS 等 网 络 服 务 规范 ， 可 以 通过 远程 服务 的 方式 ， 将 以 OGC 服务 形式 发 布 的 地 图 
数据 加 载 到 基于 浏览 器 的 OpenLayers 客户 端 中 进行 显示 。OpenLayers 采用 面向 对 象 方式 开发 ， 
并 使 用 来 自 Prototypejs 和 Rico 中 的 一 些 组 件 。 

在 操作 方面 ，OpenLayers 除了 可 以 在 浏览 器 中 帮助 开发 者 实现 地 图 浏览 的 基本 效果 ， 比 
如 放大 、 缩 小 和 平移 等 常用 操作 之 外 ， 还 可 以 进行 选取 面 、 选 取 线 、 要 素 选择 和 图 层 车 加 等 
不 同 的 操作 ， 甚 至 可 以 对 已 有 的 OpenLayers 操作 和 数据 支持 类 型 进行 扩充 ， 为 其 赋予 更 多 的 
功能 。 同 时 ， 在 OpenLayers 提供 的 类 库 当 中 ， 它 还 使 用 了 类 库 Prototypejs 和 Rico 中 的 部 分 
组 件 ， 为 地 图 浏览 操作 客户 端 增加 AJAX 效果 。 

OpenLayers 中 文官 方 网 站 (www.openlayers.cn/portalLphp) 于 2012 年 8 月 成 立 ， 是 由 一 
群 OpenLayers 爱好 者 共同 维护 的 ， 内 容 包 括 OpenLayers 中 文 API 和 中 文 帮助 文档 ， 以 及 
OpenLayers 源码 分 析 、OpenLayers 扩展 开发 、OpenLayers 相关 工具 、OpenLayers 3D 和 
Openlayers Mobile 等 。 
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6.1.2.2 Leaflet 


Leaflet (www.leafletjs.com) 是 一 个 新 兴 的 FOSS 地 图 API, 目标 是 小 巧 轻便 、 易 于 上 手 ， 
在 移动 设备 上 有 良好 的 体验 。 由 乌克兰 的 Vladimir Agafonkin 带领 一 个 专业 贡献 者 团队 开发 。 

在 Leaflet 中 强调 使 用 切片 地 图 以 及 客户 端的 矢量 图 绘制 , 例如 可 绘制 GeoJSON。 对 于 只 
需要 使 用 切片 地 图 以 及 客户 端 矢量 绘图 功能 的 简单 Web GIS 应 用 ，Leaflet 绝对 是 一 个 最 佳 的 
选择 。 

Leaflet 设计 坚持 简便 、 高 性 能 和 可 用 性 好 的 思想 ， 在 所 有 主要 桌面 和 移动 平台 能 高 效 运 
作 , 在 当前 浏览 器 上 会 利用 HTML5 和 CSS3 的 优势 ， 同 时 也 支持 旧 的 浏览 器 访问 。 支 持 插件 
扩展 ， 有 一 个 友好 、 易 于 使 用 的 API 文档 和 一 个 简单 的 、 可 读 的 源 代 码 。 但 是 实例 却 比较 少 ， 
例如 在 API 文 档 中 有 支持 OGC WMS 图 层 类 型 的 描述 ， 但 是 却 没 有 提供 相应 的 实例 或 代码 。 


6.1.2.3 D3 


D3 (www.d3js.org) 是 一 个 FOSS 数据 可 视 化 库 ， 常 用 于 绘制 图 表 ， 但 是 同时 也 包含 了 
许多 地 图 功能 。D3 的 一 个 突出 特点 是 将 数据 绑 定 到 页 面 的 文档 对 象 模型 (Document Object 
Model，DOM) 上 ， 然 后 应 用 数据 驱动 转换 到 文档 ， 从 而 实现 数据 灵活 地 动画 与 变换 效果 。 
例如 可 以 用 D3 从 数组 生成 HTML 表格 ， 或 者 使 用 相同 数据 平滑 和 动态 创建 一 个 SVG 图 表 。 

虽然 对 于 初学 者 来 说 ，D3 的 学 习 曲 线 非常 陡峭 , 但 是 对 于 要 将 地 图 与 图 表 相 结合 的 Web 
GIS 应 用 来 说 也 是 一 个 比较 好 的 选择 。 而 且 D3 支持 非 Web 黑 卡 托 投影 ， 下 面 是 其 中 的 一 个 
可 运行 的 实例 : 

http://mbostock.github.io/d3/talk/20111018/azimuthal.html 


6.1.2.4 Polymaps 


Polymaps (www.polymaps.org) 也 是 一 个 主要 面向 数据 可 视 化 用 户 的 简单 FOSS 地 图 库 ， 
在 地 图 风格 化 方面 有 独到 之 处 ,类 似 CSS 样 式 表 的 选择 器 。 主 要 用 途 是 将 地 图 切片 与 GeoJSON 
等 来 源 的 矢量 要 素 进行 混搭 。 不 过 ， Polymaps 也 可 将 栅 格 图 像 进 行 仿 射 变换 ,并 全 加 在 切片 
地 图 中 (www.polymaps.org/ex/transform.html) 。 此 外 ，K 均值 聚 类 实例 (polymaps.org/ex/ 
clusterhtml) 也 展示 了 Polymaps API 的 另 一 个 独特 的 特点 一 一 动态 生成 大 量 的 点 。 


6.1.3 ”主要 的 商业 Web 地 图 API 


当前 , 商业 软件 公司 创造 了 几 个 专用 的 Web 地 图 API 也 已 经 变 得 非常 流行 。 在 这 里 ,“ 专 
用 ”表示 该 API 源 代码 不 能 下 载 ， 或 不 允许 修改 ， 或 未 经 付费 不 能 部 署 。 


6.1.3.1 谷歌 地 图 与 必 应 地 图 API 


通过 谷歌 地 图 API (www.developers.google.com/maps) ， 可 以 将 开发 者 自己 的 数据 辣 加 
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在 来 自 谷歌 切片 地 图 上 。 这 些 倒 加 的 数据 通常 使 用 KML 文件 方式 提供 , 并 且 在 客户 端 以 可 交 
互 的 矢量 图 形 方式 绘制 。 开 发 者 可 以 使 用 自 定义 的 符号 对 这 些 图 形 重 新 样式 化 ， 还 可 以 实现 
用 户 点 击 某 图 形 时 ， 弹 出 一 个 小 窗口 或 图 表 显 示 额 外 的 属性 信息 。 

由 于 许多 用 户 所 使 用 第 一 个 互联 网 地 图 应 用 通常 是 谷歌 地 图 ， 习 惯 了 谷歌 地 图 的 导航 方 
式 与 地 图 风格 ， 因 此 使 用 谷歌 地 图 API 创建 Web GIS 的 最 大 优点 ， 是 该 应 用 看 起 来 有 谷歌 地 
图 的 感觉 ， 即 使 这 是 嵌入 在 一 个 陌生 的 第 三 方 应 用 程序 。 虽 然 谷歌 地 图 API 与 上 述 的 FOSS 
地 图 API 相 比 ， 并 没有 更 强大 或 更 容易 使 用 ， 然 而 它 提 供 了 非常 完整 的 API 说 明文 档 ， 并 有 

-个 拥有 众多 开发 人 员 的 开发 者 社区 。 

使 用 免费 的 谷歌 地 图 API 的 应 用 程序 必须 是 可 公开 访问 的 ,并 且 每 天 不 会 产生 超过 25000 
次 地 图 加 载 。 不 符合 该 条 件 和 其 他 标准 (https://developers.google.com/maps/licensing) 的 Web 
GIS 应 用 程序 必须 购买 商业 授权 的 谷歌 地 图 API。 

在 世界 范围 内 ， 另 一 家 大 型 商业 地 图 提供 商 是 微软 的 必 应 地 图 
(www.microsoft.com/maps/) ， 其 提供 的 用 于 Web 和 移动 应 用 程序 的 API， 与 谷歌 地 图 API 
非常 相似 。 与 谷歌 一 样 ， 必 应 地 图 同时 提供 了 免费 使 用 方案 和 必须 在 各 种 使 用 情况 下 
(www.microsoft.com/maps/Licensing/licensing.aspx〉 购 买 的 企业 许可 证 。 它 们 之 间 的 一 个 区 
别 是 ， 必 应 地 图 API 并 不 太 重 视 KML 使 用 ,这 是 由 于 KML 格式 是 由 谷歌 推广 的 ， 谷 歌 是 用 
于 创建 KML 文件 的 主要 平台 。 

谷歌 与 必 应 地 图 API 在 选 址 、 路 径 规 划 等 应 用 程序 中 得 到 广泛 的 应 用 ， 典 型 的 例子 有 房 
地 产 应 用 〈truliacom) 、 商 业 选 址 〈yelp.com) 和 教堂 选 址 〈lds.org/maps) 等 ， 但 是 许多 互 
联网 Web GIS 应 用 也 正 开始 采用 FOSS 作为 奉 代 方案 。 例 如 Craigslist (craigslistorg) 就 采用 
了 Leaflet 结合 OpenStreetMap 的 方式 展示 房地产 搜索 结果 。 


6.1.3.2 ArcGIS APIs 


ESRI 为 ArcGIS 平台 创建 了 一 系列 的 Web 地 图 API, 其 中 有 一 些 比 谷歌 地 图 API 以 及 许 
多 FOSS 地 图 API 提供 了 更 丰富 的 功能 ,这 些 API 支持 多 种 语言 与 平台 ,例如 JavaScript、Flex、 
Silverlight、iOS 与 Android 等 。 理 论 上 ， 虽 然 这 些 API 功能 应 该 基本 一 致 ， 但 是 实际 上 在 成 
熟 度 与 应 用 的 广泛 性 存在 较 大 的 差异 。ArcGIS API for JavaScript 是 其 中 功能 最 全 、 使 用 最 广 
泛 的 API。 

ArcGIS API 主要 用 于 访问 ArcGIS 在 线 (www.esri.com/software/arcgis/arcgisonline) 、 
ArcGIS 门户 网 站 (www.esri.com/software/arcgis/arcgisserver/extensions/portal-for-arcgis〉 以 及 
ArcGIS Server 发 布 的 Web 服务 。 但 是 ， 一 些 API 也 可 以 访问 OGC 服务 、KML 以 及 通用 的 
切片 地 图 (例如 在 第 5 章 中 介绍 的 用 TileMill 创建 的 地 图 ) 。 

这 些 API 对 于 开发 与 教学 用 途 是 免费 的 ， 但 是 如 果 销 售 基于 这 些 API 创建 的 应 用 程序 或 
者 在 其 中 嵌入 广告 ， 那 么 则 需要 付费 。 


109 


一 Web GIS 原理 与 应 用 开发 


6.2 使 用 Web 地 图 API 的 基本 步骤 


如 前 所 述 , 项 目 情 况 和 需求 决定 着 API 的 选择 .对 于 不 同 的 项 目 可 能 需要 使 用 不 同 的 APL， 
而 且 各 API 都 各 有 优 缺 点 ， 在 一 个 项 目 中 常常 需要 混用 多 个 API。 因 此 作为 一 个 程序 员 ， 需 
要 同时 掌握 多 个 API 的 使 用 。 那 么 重要 的 是 要 了 解 这 些 API 与 语言 背后 的 通用 结构 、 模 式 及 
架构 ， 这 样 便 可 在 使 用 过 程 中 学 习 新 的 API。 技 术 总 是 在 不 断 变化 ， 如 果 将 自己 绑 到 某 一 单 

-的 开发 模式 ， 就 会 限制 编程 工具 的 选择 。 

下 面 将 介绍 使 用 上 述 Web 地 图 API 的 一 些 通用 模式 与 过 程 。 在 深入 介绍 OpenLayers 之 
前 ， 将 这 部 分 内 容 独 立 出 来 介绍 ， 目 的 就 是 让 读者 知道 在 编写 代码 时 哪些 内 容 并 不 是 
OpenLayers 所 独 有 的 。 


6.2.1 引用 JavaScript 与 样式 文件 


在 使 用 Web 地 图 API 编写 功能 之 前 ， 需 要 在 HTML 页 面 中 增加 一 个 <scrip 人 标签， 指向 
Web 地 图 API 的 JavaScript 文件 。 在 引用 JavaScript 时 要 清晰 地 意识 到 : 所 引用 的 JavaScript 
文件 越 多 , 那么 页 面 加 载 所 花费 的 时 间 越 长 。 一 些 API 比较 小 (因此 有 像 ModestMaps 名 称 ) ， 
但 是 提供 的 功能 也 可 能 要 少 。 请 注意 ，OpenLayers 是 一 个 功能 强 而 且 加 载 时 间 也 长 的 最 大 的 
API。 当 采用 较 大 的 API 时 ， 一 些 开 发 人 员 构建 和 引用 只 包含 自己 需要 功能 的 缩小 版 API。 

引用 API 的 方式 有 几 种 。 一 种 是 将 API 下 载 并 部 署 到 自己 的 服务 器 上 ， 这 样 做 的 好 处 是 
将 加 载 时 间 减 到 最 小 , 而 且 可 以 自 定义 API。 另 一 种 方式 是 引用 他 人 服务 器 上 的 API。 内 容 分 
发 网 络 (Content Delivery Network， 简 称 CDN) 站 点 专门 用 于 存储 通用 API。 对 于 在 CDN 中 
OpenLayers 的 引用 方式 如 下 : 

<script sre="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"> </script> 

不 过 ， 一般 API 开发 者 也 提供 API 的 直接 的 引用 。 例 如 对 于 OpenLayers， 也 可 使 用 如 下 
方式 来 引用 : 

‘<script sre="http://openlayers.org/api/OpenLayers.js"> </script> 

在 本 书 中 为 了 简便 ， 直 接 通 过 CDN 的 方式 来 引用 OpenLayers。 但 是 如 果 是 开发 内 部 局 
域 网 应 用 程序 ， 或 者 需要 自 定义 API， 那 么 则 需要 下 载 API 的 源 代码 并 部 署 到 自己 的 服务 器 
中 。 

许多 Web 地 图 API 在 提供 JavaScript 的 同时 也 提供 了 一 些 样式 表 。 通过 CSS 文件 引用 的 
方式 使 用 这 些 样式 表 。 例 如 从 CDN 上 引用 OpenLayers 样式 表 的 代码 如 下 : 


<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css" > 
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6.2.2 ”地 图 div 与 对 象 


当 需 要 在 页 面 中 放 入 一 个 地 图 时 ， 通 常 需要 在 页 面 中 增加 一 个 HTML 的 <div> 元 素 用 于 
显示 地 图 ， 然 后 使 用 API 创建 一 个 地 图 对 象 ， 并 将 地 图 对 象 与 增加 的 div 元 素 建立 连接 。 
在 页 面 的 <body> 部 分 增加 一 个 <div> 元 素 的 代码 如 下 : 


<body> 
<div id="map"></div> 
<Jbody> 
然后 在 页 面 的 JavaScript 代码 中 创建 一 个 OpenLayers.Map 对 象 ， 并 建立 与 div 的 关联 。 
OpenLayers.Map 的 构造 函数 将 div 的 ID 作为 作为 参数 。 代 码 如 下 : 


var myMap; 
myMap = new OpenLayers.Map("map"); 


通过 上 述 方式 ， 可 以 在 页 面 中 同时 放置 多 个 地 图 。 每 个 地 图 有 自己 的 div 与 
OpenLayers.Map 对 象 。 

地 图 的 空间 参照 系 会 影响 地 图 的 显示 ， 并 决定 使 用 的 坐标 格式 。 下 面 是 一 个 稍微 复杂 的 
例子 ， 显 示 了 如 何 显 式 使 用 Web 墨 卡 托 投影 定义 坐标 系统 : 


var toProjection = new OpenLayers.Projection("EPSG:900913"); // Web 墨 卡 托 投影 
Var map; 


map = new OpenLayers.Map("map", {projection:toProjection}); 


在 调用 OpenLayers.Map 的 构造 函数 时 ， 可 以 将 一 个 JavaScript 对 象 作为 可 选 的 参数 传 进 
来 。 由 于 该 参数 是 一 个 JavaScript 对 象 ， 因 此 它 可 以 包含 JavaScript 中 的 所 有 事物 ， 包 括 字符 
串 、 数 字 、 数 组 、 日 期 以 及 JavaScript 对 象 等 。 在 上 面 的 例子 中 ， 先 创建 了 一 个 表示 Web 黑 
卡 托 投影 的 对 象 , 然后 在 创建 地 图 对 象 时 将 其 赋 给 一 匿名 的 JavaScript 对 象 的 projection 属性 ， 
从 而 将 整个 地 图 的 空间 参照 系 设置 为 Web 黑 卡 托 投影 。 

地 图 对 象 包含 了 增加 图 层 、 得 到 当前 图 层 集合 、 地 图 窗口 操作 等 。 对 于 大 多 数 的 Web 地 
图 API， 地 图 是 最 重要 而 且 是 功能 最 强大 的 对 象 。 当 学 习 一 个 新 的 地 图 API 时 ， 首 先 需要 认 
真 查看 其 关于 地 图 对 象 的 文档 ， 理 解 该 对 象 包含 的 方法 以 及 如 何 调用 其 中 最 常用 的 方法 。 


6.2.3 Layer 对 象 


大 多 数 Web 地 图 API 一 般 都 提供 了 多 种 方式 定义 图 层 对 象 , 然后 将 图 层 对 象 逐 一 加 入 到 
地 图 对 象 中 ， 用 以 创建 混搭 应 用 。 对 于 图 层 需要 特别 注意 的 是 ， 在 某 种 意义 上 ， 图 层 就 是 代 
表 WMS 或 切片 地 图 的 一 个 Web 服务 ， 其 本 身 也 可 能 包含 许多 数据 图 层 。 但 是 ， 只 需要 创建 

-个 图 层 对 象 ， 就 可 将 该 类 型 的 服务 加 入 到 地 图 中 。 此 外 ， 其 他 图 层 对 象 可 以 引用 一 个 数据 
文件 ， 例 如 KEML 或 GeoJSON。 
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在 许多 Web 地 图 API 中 ， 图 层 对 象 通常 是 一 抽象 的 类 ， 提供 了 一 系列 通用 属性 ， 该 类 不 
能 实例 化 , 开发 人 员 只 能 实例 化 其 更 具体 的 子 类 。OpenLayers.Layer 类 的 帮助 说 明文 档 地 址 如 


局 


dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers/Layer-js.html 


图 层 类 包含 了 所 有 图 层 都 有 的 投影 、 单位 和 比例 尺 等 属性 。 图 层 类 的 子 类 有 30 多 个 ， 常 
用 的 有 OpenLayers.Layer.WMS、OpenLayers.Layer.Grid 与 OpenLayers.Layer.Vector 等 。 

当 在 OpenLayers 中 创建 一 个 新 的 图 层 对 象 时 ， 通 常 需要 提供 该 图 层 的 URL 或 是 包含 数 
据 源 的 文件 路 径 。 不 过 ， 新 建 图 层 对 象 后 并 不 会 立即 显示 该 图 层 ， 需 要 调用 地 图 对 象 的 
addLayer 方法 将 其 加 入 到 地 图 中 才能 显示 。 下 面 的 代码 展示 了 如 何 创建 一 个 WMS 图 层 ， 并 
车 加 在 底 图 上 : 


layer = new OpenLayers.Layer.WMS( 
"WMS", "http://localhost:8080/geoserver/philadelphia/wms", 
Uy 
LAYERS: 'philadelphia:FarmersMarkets',transparent: true 
上 
{ 
singleTile:true, 
isBaseLayer: false 
时 
); 
map.addLayer(layer); 
在 创建 WMS 图 层 对 象 时 ,最 主要 是 提供 一 个 URL 与 一 个 图 层 名 , 而 其 他 属性 像 singleTile 
与 isBaseLayer 仅仅 是 指示 在 地 图 中 如 何 显示 该 图 层 。 
地 图 对 象 的 addLayer 方法 才 是 真正 将 图 层 加 入 到 地 图 并 显示 。 如 果 再 调用 addLayer 并 传 
入 其 他 图 层 作为 参数 ， 那 么 该 新 加 入 的 图 层 显示 在 地 图 的 最 顶层 。 
有 些 类 型 的 图 层 ， 像 OpenStreetMap、 必 应 地 图 ， 有 大 家 都 熟知 的 URL， 因 此 对 于 这 些 
图 层 , 在 创建 对 象 时 OpenLayers 并 不 需要 开发 人 员 提供 URL,， 只 需要 提供 一 个 用 户 友好 的 名 
称 即 可 。 例 如 ， 下 面 的 代码 演示 了 如 何在 地 图 中 加 入 基本 的 OpenStreetMap 切片 地 图 : 


Var osm = new OpenLayers.Layer.OSM( "Simple OSM Map"); 
map.addLayer(osm); 


6.2.4 图 层 样式 化 机 制 


那些 在 服务 器 端 绘制 的 图 层 ， 例 如 切片 地 图 与 WMS 图 像 ， 以 及 应 用 了 样式 ， 但 是 对 于 


由 浏览 器 绘制 的 图 层 ， 例 如 GeoJSON 或 GeoRSS， 必 须 定义 如 何 样式 化 这 些 图 层 。Web 地 图 
API 中 通常 会 提供 一 组 属性 用 于 指定 浏览 器 如 何 绘制 这 些 图 层 。 这 组 属性 包括 填充 颜色 、 填 
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充 宽度 和 轮廓 线 宽度 和 轮廓 线 颜色 等 。 许 多 API 允许 使 用 自 定义 的 图 像 符号 化 点 对 象 ， 而 不 
是 仅仅 放置 一 个 简单 的 点 。 

下 面 的 OpenLayers 代码 演示 了 如 何 将 一 个 包含 食品 商店 的 GeoJSON 图 层 加 入 到 地 图 中 ， 
并 使 用 保存 在 一 个 名 为 grocery.svg 的 SVG 文件 中 的 购物 车 图 标 来 样式 化 。 该 图 标 也 可 以 是 一 
个 PNG 文件 或 其 他 类 型 的 图 像 。 


var fromProjection = new OpenLayers.Projection("EPSG:4326"); 
Var groceryLayer = new OpenLayers.Layer. Vector("Grocery", { 
projection: fromProjection, 
strategies: [new OpenLayers. Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "supermarkets.geojson", 
format: new OpenLayers.Format.GeoJSON() 
»), 
style: { 
externalGraphic: 'svg/grocery.svg’, 
graphicWidth: 25, 
graphicHeight: 25, 
graphicYOffset: 0 
} 
D; 
map.addLayer(groceryLayer); 


与 本 例 相 似 的 运行 结果 如 图 6.1 所 示 。 


图 6.1 使 用 图 标 样式 化 点 图 层 
6.2.5 ”事件 与 交互 元 素 


只 有 通过 交互 元 素 ， 才 能 使 地 图 不 再 是 页 面 中 的 一 张 静 态 图 片 。 上 面 描述 的 地 图 与 图 层 
对 象 都 可 以 通过 程序 来 响应 用 户 的 行为 ， 例 如 鼠标 单 击 。 用 户 的 行为 称 为 事件 ， 响 应 事件 所 
调用 的 代码 称 为 事件 处 理 程序 。 通 常事 件 都 会 为 事件 处 理 程序 提供 事件 相关 的 参数 。 

例如 ， 可 设置 让 地 图 监听 用 户 鼠 标 单 击 事件 ， 然 后 编写 一 个 事件 处 理 程序 ， 输 入 该 程序 
的 参数 是 用 户 鼠 标 单 击 处 的 屏幕 坐标 。 在 处 理 程序 中 ， 首 先 需要 将 屏幕 坐标 转化 为 地 图 坐标 ， 
然后 将 该 坐标 写 入 到 HTML 页 面 中 的 某 一 标签 中 ， 这 样 用 户 便 能 看 到 单 击 处 的 坐标 。 当 然 ， 
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还 可 以 将 该 事件 处 理 程序 绑 定 到 鼠标 移动 事件 上 ， 那 么 便 能 在 标签 中 时 刻 显示 用 户 鼠 标 当前 
所 在 的 位 置 坐标 。 

Web 地 图 用 户 通常 希望 获得 地 图 中 某 些 具体 要 素 的 更 详细 信息 。 通 常 的 实现 方式 是 ， 处 
理 单 击 事件 ， 弹 出 一 个 小 窗口 ， 在 其 中 显示 被 单 击 要 素 的 更 多 信息 ， 如 图 6.2 所 示 。 事 实 上 ， 
许多 Web API 都 有 专门 显示 与 处 理 弹出 式 窗口 的 类 与 方法 ， 方 便 开发 人 员 实 现 类 似 的 功能 。 


PN 二 


二 Farm 51 
Sist E Chester, 19143 


图 6.2 通过 弹出 式 窗口 显 示 要 素 更 详细 信息 


正如 图 6.2 所 显示 的 ， 通 常 弹出 式 窗口 只 用 于 显示 比较 简单 的 信息 。 但 是 有 时 希望 显示 
更 多 的 内 容 ， 这 对 于 弹出 式 窗口 有 限 的 空间 来 说 过 于 复杂 ， 即 使 API 允许 在 弹出 式 窗口 中 显 
示 很 大 的 图 像 或 表格 ， 但 对 用 户 更 友好 的 方式 是 在 页 面 的 另 一 个 div 中 显示 。Web 地 图 API 
通常 都 提供 通过 坐标 点 执行 空间 查询 ， 查 询 到 用 户 单 击 了 那个 要 素 ， 并 获取 该 要 素 的 属性 信 
息 。 有 了 这 些 信息 之 后 ， 在 事件 处 理 程序 中 可 做 进一步 的 应 用 ， 例 如 可 将 这 些 信息 传 递 给 另 
个 一 专业 的 API 绘制 图 表 来 查询 维基 百科 、 查 询 周边 销售 中 的 房屋 等 。 

另 一 个 比较 常用 的 交互 是 图 层 的 显示 与 隐藏 。 要 注意 ， 在 Web 地 图 中 ， 图 层 代表 的 是 整 
个 Web 服务 。 由 于 所 有 的 图 层 都 绘制 在 切片 图 像 中 ， 因 此 对 于 切片 地 图 来 说 ， 不 可 能 切换 其 
中 某 个 图 层 的 可 见 性 。 但 是 ， 可 将 整个 切片 图 层 关闭 ， 也 可 关闭 WMS 或 GeoJSON 图 层 。 

在 OpenLayers 中 ， 通 过 地 图 对 象 可 以 获取 其 包含 的 所 有 图 层 对 象 ， 并且 图 层 对 象 有 一 个 
setVisibility 方法 ， 因 此 要 切换 图 层 的 可 见 性 只 需要 很 简单 的 几 行 代码 。 下 面 的 示例 函数 用 于 
切换 指定 名 称 的 图 层 的 可 见 性 : 


function toggleLayerViz(layerName){ 
var layerToToggle = map.getLayersByName(layerName)[0]; 
if (layerToToggle.visibility){ 
layerToToggle.setVisibility(false); 
i 
else{ 
layerToToggle.setVisibility(true); 
1 
} 
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6.3 查看 OpenLayers 实例 


学 习 OpenLayers 或 者 其 他 任务 API， 最 好 的 方式 就 是 查看 并 运行 其 开发 者 的 实例 代码 ， 
并 按照 自己 的 习惯 进行 一 些 调整 与 调试 。 在 Web GIS 应 用 程序 的 实际 开发 过 程 中 ， 一 种 策略 
是 先 在 互联 网 上 寻找 与 应 用 程序 想 类 似 的 例子 ， 然 后 将 这 些 例 子 结合 在 一 起 进行 调整 ， 并 加 
入 自己 的 内 容 ， 直 到 满足 要 求 。 

以 下 将 通过 分 析 几 个 典型 的 实例 ， 加 深 读者 对 OpenLayers 开发 的 理解 。 


6.3.1 切片 地 图 实例 


OpenLayers 实例 的 地 址 是 dev.openlayers.org/releases/OpenLayers-2.13.1/examples, 这 是 寻 
找 参 考 代 码 资源 的 最 重要 的 地 方 。 

可 以 选择 几 个 感 兴趣 的 页 面 ， 利 用 浏览 器 的 “查看 页 面 源 代 码 ” 功 能 查看 源 代码 。 

访问 来 自 ESRI ArcGIS 在 线 中 切片 地 图 的 实例 代码 地 址 如 下 : 

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/xyz-esri.html 

在 其 页 面 源 代码 中 ， 定 位 到 <script> 标 签 部 分 ， 其 内 容 如 下 : 


var map, layer; 
function initO)f 
var layerExtent = new OpenLayers.Bounds( -13758743.4295939, 5591455.28887228, 
-13531302.3472101 , 5757360.4178881); 
map = new OpenLayers.Map( "map', {'restrictedExtent': layerExtent} ); 
layer = new OpenLayers.Layer.XYZ( "ESRI", 


"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_ Map/MapServer/tile/${z}/${y}/${x}", 
{spherical Mercator: true} ); 
map.addLayer(layer); 
map.zoomToExtent(map.restrictedExtent); 


} 


上 面 的 代码 依次 实现 了 如 下 一 些 功能 : 

(1) 为 地 图 与 图 层 对 象 分 别 申明 了 变量 。 

(2) 设置 了 图 层 最 大 可 查看 的 边界 坐标 。 这 有 助 于 防止 用 户 在 切片 区 域 区 外 缩放 地 图 。 
(3) 将 地 图 div 的 id 与 边界 对 象 作 为 参数 ， 创 建 地 图 对 象 ， 

(4) 创建 图 层 对 象 ， 传 递 的 参数 有 图 层 的 名 称 、 切 片 的 URL 结构 ， 以 及 指示 切片 使 用 

了 Web 墨 卡 托 投影 的 可 选 属性 。 

(5) 将 图 层 加 入 到 地 图 中 。 

(6) 将 地 图 放大 到 最 大 可 查看 边界 坐标 。 

上 述 的 主要 代码 集中 放置 于 init() 函 数 中 , 由 于 在 页 面 中 有 <body onload="init()">, 表示 页 
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面 内 容 加 载 完成 之 后 立即 执行 init0 函 数 。 
该 实例 使 用 了 OpenLayers.Layer.XYZ 类 来 访问 切片 图 层 。 那 么 请 读者 考虑 ， 如 何 使 用 该 
类 来 访问 我 们 在 第 5 章 中 创建 的 费城 切片 地 图 呢 ? 


6.3.2 WMS 实例 


访问 WMS 服务 最 简单 的 实例 的 地 址 如 下 : 
http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/lite.html 
该 实例 演示 了 如 何 访问 运行 在 一 个 公共 服务 器 上 的 WMS 服务 ， 并 将 其 加 入 到 地 图 中 。 
其 代码 如 下 : 
var map, layer; 
function init){ 
map = new OpenLayers.Map( 'map’ ); 
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
"http://vmap0.tiles.osgeo.org/wms/vmapO", 
{layers: "basic'y ); 
map.addLayer(layer); 
map.zoomToMaxExtent(); 
b 


在 整体 结构 上 ， 该 代码 与 “6.3.1 切片 地 图 实例 ”中 的 代码 完全 一 致 ， 唯 一 的 不 同 是 图 层 
创建 方式 的 不 一 样 。 在 本 代码 中 ， 使 用 了 OpenLayers.Layer.WMS。 要 使 用 该 类 ， 需 要 在 构造 
函数 中 提供 图 层 的 名 称 、WMS 服务 的 URL， 以 及 希望 显示 的 图 层 列表 。 上 述 代码 表示 只 需 
要 从 WMS 服务 中 请 求 名 为 basic 的 图 层 。 


6.3.3 ”查询 实例 


得 到 用 户 所 单 击 要 素 的 属性 信息 ， 并 将 其 显示 在 一 个 弹出 式 窗口 中 ， 是 一 个 Web GIS 应 
用 程序 中 最 常用 的 功能 。 一 个 这 样 实例 的 地 址 如 下 : 

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/getfeatureinfo-popup.html 

在 该 实例 的 JavaScript 代码 中 ， 第 一 句 代 码 如 下 : 

OpenLayers.ProxyHost = "proxy.cgi?url="; 

该 行 代码 用 于 设置 代理 地 址 。 当 应 用 程序 异步 调用 远程 Web 服务 时 ， 例 如 查询 WMS 服 
务 ， 该 请 求 需要 通过 安装 在 服务 器 上 的 代码 ， 将 其 转发 到 远程 Web 服务 上 。 

接 下 来 是 如 下 代码 : 


varmap, info; 
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function load() { 
map =new OpenLayers.Map({ 
div: "map", 
maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573) 
D); 


Var political = new OpenLayers.Layer.WMS("State Boundaries", 
"http://demo.opengeo.org/geoserver/wms", 
fayers': 'topp:tasmania state boundaries', transparent: true, format 'image/gif'}, 
{isBaseLayer: true} 

); 


var roads = new OpenLayers.Layer.WMS("Roads", 
"http://demo.opengeo.org/geoserver/wms", 
flayers': 'topp:tasmania_roads', transparent: true, format: 'image/gif }, 
{isBaseLayer: false} 

); 


var cities = new OpenLayers.Layer.WMS("Cities", 
"http://demo.opengeo.org/geoserver/wms", 
fayers': 'topp:tasmania cities', transparent: true, format: image/gif }, 
{isBaseLayer: false} 

); 


var water = new OpenLayers.Layer.WMS("Bodies of Water", 
"http://demo.opengeo.org/geoserver/wms", 
{'layers': 'topp:tasmania_ water_bodies', transparent: true, format: 'image/gif'}, 
fisBaseLayer: false} 

六 


map.addLayers([political, roads, cities, water]); 
/ 其 他 代码 
} 


上 述 代码 初 看 很 复杂 ， 但 细 看 以 后 发 现 其 实 逻辑 也 很 简单 ， 就 是 分 别 创建 了 4 个 WMS 
图 层 对 象 ， 所 使 用 的 是 同一 个 WMS 服务 ， 只 是 对 应 不 同 的 图 层 而 已 ， 最 好 将 它们 加 入 到 地 
图 中 。 

接 下 来 就 是 查询 与 显示 查询 结果 的 代码 ， 如 下 所 示 : 


info = new OpenLayers.Control.WMSGetFeatureInfo({ 
url: 'http://demo.opengeo.org/geoserver/wms', 
title: 'Identify features by clicking’, 
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queryVisible: true, 
eventListeners: { 
getfeatureinfo: function(event) { 


map.addPopup(new OpenLayers.Popup.FramedCloud( 


"chicken", 
map.getLonLatFromPixel(event.xy), 
null, 
event.text, 
null, 
true 

); 


D); 


map.addControl(info); 
info.activate(); 


在 上 述 代码 中 , 使 用 了 WMS 的 GetFeatureInfo 方法 执行 地 图 的 查询 ,不 过 , 在 OpenLayers 
中 使 用 GetFeatureInfo 相对 有 点 复杂 。 首 先 需要 创建 一 个 OpenLayers.Control.WMSGetFeatureInfo 


控件 ， 并 传 入 如 下 一 些 参数 : 
(1) 要 查询 的 WMS 服务 地 址 。 
(2) 该 控件 的 标题 。 


(3) 一 个 布尔 变量 ， 指 示 是 否 对 隐藏 图 层 的 要 素 也 进行 查询 。 
(4) 最 后 是 一 个 事件 监听 器 ， 定 义 了 当 查 询 执 行 或 完成 后 应 该 执行 的 代码 。 


前 3 个 参数 很 简单 ， 不 需要 进一步 解释 。 唯 独 第 4 个 参数 ， 对 于 初学 者 来 说 会 比较 困惑 。 
要 理解 第 4 个 参数 ， 首 先 要 知道 WMSGetFeatureInfo 控件 可 以 监听 名 为 getfeatureinfo 的 


事件 。 该 控件 处 理 单 击 或 悬 停 事件 ， 并 使 用 OpenLayers.Format 解析 结果 ， 


getfeatureinfo 事件 。 


然后 激活 


从 上 面 的 代码 可 以 看 到 ， 事 件 返回 了 一 个 事件 对 象 ， 该 对 象 包含 了 被 查询 要 素 的 一 些 信 
息 。 事 件 处 理 函数 将 返回 的 信息 放置 到 一 个 弹出 式 窗口 中 。 该 事件 处 理 程序 代码 被 封装 在 


function(event){ . . .} 代 码 块 中 。 


真正 实现 弹出 窗口 的 代码 是 地 图 对 象 的 addPopup 方法 。 该 方法 将 弹出 式 窗口 对 象 作为 参 
数 。 在 上 面 的 代码 中 ， 利 用 OpenLayers.Popup.FramedCloud 构造 函数 动态 创建 了 一 个 


FramedCloud 类 型 的 弹出 式 窗口 。 创 建 该 对 象 的 代码 如 下 : 


new OpenLayers.Popup.FramedCloud( 
"chicken", 
map.getLonLatFromPixel(event.xy), 
null, 


event.text, 
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站 


通过 上 述 代 码 可 以 看 出 ， 传 入 了 以 下 6 个 参数 : 

(1) 一 个 代表 该 弹出 式 窗口 的 唯一 ID。 该 ID 基本 不 使 用 ， 因 此 该 实例 的 开发 者 幽默 地 
将 其 设置 为 “chicken”。 

(2) 弹出 式 窗口 固定 位 置 的 经 纬度 。 这 里 事件 对 象 派 上 用 场 了 ， 它 的 xy 属性 包含 了 该 
信息 。 

(3) 窗口 中 内 容 的 大 小 。 如 果 设 置 为 null， 那 么 弹出 式 窗口 就 会 根据 内 容 多 少 ， 自 动 调 
整 大 小 。 

(4) 窗口 中 显示 的 文本 内 容 。 对 于 本 实例 ，WMS 返回 的 是 HTML 表格 元 素 ， 其 中 包含 
被 查询 要 素 的 属性 。 事 件 对 象 的 text 属性 就 包含 了 该 HTML 内 容 。 

(5) 固定 窗口 的 对 象 。 

(6) 一 个 布尔 变量 ， 指 示 是 否 在 窗口 的 右上 角 显 示 一 个 红色 的 图 标 ， 以 便 关 闭 窗口 。 


6.4 实践 10: 使 用 OpenLayers 实 现在 切片 地 图 上 县 加 WMS 


本 实践 的 目标 是 让 读者 了 解 在 OpenLayers 的 地 图 中 谷 加 来 自 不 同类 型 的 Web 服务 。 首 
先 需要 发 布 显示 费城 农贸 市 场 的 WMS 服务 ， 然 后 利用 OpenLayers 将 该 图 层 登 加 在 第 5 章 实 
践 中 创建 的 切片 地 图 上 ， 最 后 增加 一 些 相应 用 户 单 击 农贸 市 场 要 素 的 代码 ， 在 弹出 式 窗口 中 
显示 更 多 的 信息 ， 运 行 效果 如 图 6.3 所 示 。 


sunl” Lancaster Ave 
38th and Powelton Sts, 19104 


bwWIYORKTOWM, 


区 
DEN 


6.3 ”应 用 程序 运行 效果 
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6.4.1 发 布 专题 数据 WMS 服务 


第 一 步 是 将 费城 农贸 市 场 点 数据 发 布 为 一 个 美观 的 WMS 服务 。 在 本 应 用 程序 中 ， 农 贸 
市 场 WMS 图 层 扮 演 的 角色 是 业务 图 层 。 

(1) 从 下 载 文 件 的 “Data\FarmersMarkets” 文 件 夹 中 将 数据 复制 到 “C:\Data\Philadelphia” 
文件 夹 中 。 

(2) 打开 GeoServer 的 Web 管理 页 面 ， 按 照 第 4 章 中 介绍 的 方法 ， 将 上 面 的 
FarmersMarkets.shp 农贸 市 场 数据 发 布 为 一 个 图 层 并 将 其 放置 在 webgis 工作 区 中 。 使 用 
OpenLayers 预览 该 图 层 ， 结 果 显 示 如 图 6.4 所 示 。 

- = 配 下 


国 openLayers map preview x 二 


localhost coreverh7C| 易 和 天- 2 | 三 


四 
a 压轴 


Scale = 1 : 316K -8359966.23137, 4877667.69721 
CNick on the map to get feature info 


图 6.4 使 用 OpenLayer 预览 农贸 市 场 图 层 


(3) 从 SLD 说 明文 档 中 找到 带 “ 标 注 的 点 符号 ”例子 ， 其 URL 地 址 如 下 : 
http://docs.geoserver.org/stable/en/user/styling/sld-cookbook/points.html#point-with-styled-label 
以 该 例子 为 基础 ， 创 建 一 个 名 为 point_pointwithstyledlabel 的 SLD 文件 。 
由 于 SLD 在 读 包 含 标注 名 称 的 字段 时 ,是 要 区 分 大 小 写 的 。 而 农贸 市 场 的 Shapefile 数据 
中 包含 名 称 的 字段 是 NAME， 因 此 需要 按照 如 下 方式 修改 SLD 的 代码 : 


<Label> 


<ogc:PropertyName>NAME</ogc:PropertyName> 
</Label> 
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(4) 按照 第 4 章 介绍 的 方法 , 将 point_pointwithstyledlabel 样式 化 图 层 描述 符 应 用 于 农贸 
市 场 图 层 ， 将 其 设置 为 默认 样式 或 唯一 样式 。 
当成 功 设置 了 SLD 以 后 ， 使 用 OpenLayers 预览 农贸 市 场 WMS 图 层 ， 显 示 结 果 如 图 6.5 
所 示 。 
EEC | 


国 openLayers map preview x 【十 


Cl dl- 人 S| 三 


Scale = 1 : 316K -8362372.47532, 4889726.33768 
Click on the map to get feature info 


图 6.5 使 用 了 SLD 以 后 的 农贸 市 场 图 层 
6.4.2 ”准备 开发 环境 


由 于 浏览 器 的 同 源 策略 ， 一 般 Web 服务 器 不 允许 第 三 方 的 脚步 直接 调用 Web 服务 ， 因 

此 正如 前 面 介绍 的 ， 需 要 通过 服务 器 将 客户 端的 请 求 转发 到 Web 服务 所 在 的 服务 器 上 。 在 
OpenLayer 中 ， 需 要 设置 一 个 代理 服务 器 程序 。 如 果 没 有 设置 ， 那 么 在 Firebug 或 其 他 开发 者 
工具 则 会 提示 图 6.6 所 示 的 错误 。 

己 阻 止 交叉 源 请 求 ， 同 源 策 政 不 允许 这 到 http://ocalhost:8080/geoserver/webgis 

lwms?LAYERS =webgis%3AFarmersMarkets&QUERY _LAYERS=webgis%3AFarmersMarkets&STYLES=& 

SERVICE=WMS&VERSION=1. 1. 18REQUEST=GetFeatureInfo8BBOX=- 

8384671.013734%2C4846374.399588%2C-8345535.255258%2C4885510. 158064& 

FEATURE_COUNT=108HEIGHT=5128&WIDTH=5128&FORMAT=image%2Fpng& 

INFO_FORMAT=application%2Fjson&SRS=EPSG%3A9009138X=2448&Y=134 上 的 远程 资源 。 可 以 将 次 

源 移 动 到 相同 的 域 匀 上 或 者 启 用 CORS 来 解决 这 个 问题 。 


图 6.6 同 源 策略 阻止 交叉 源 请 求 
不 过 ， 随 着 HTML 的 CORS (Cross Origin Resource Sharing， 跨 域 资源 共享 ) 的 推出 ， 可 
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以 在 服务 器 端 进行 设置 ， 以 便 允 许 第 三 方 的 脚步 直接 访问 服务 器 中 资源 。 这 样 便 可 不 再 需要 
代理 程序 了 ， 而 且 由 浏览 器 直接 访问 ， 不 通过 服务 器 便 可 访问 Web 服务 ， 因 此 程序 响应 速度 
肯定 有 很 大 的 改进 。 
但 是 GeoServer 默认 时 ， 并 不 允许 跨 域 资源 共享 。 需 要 进行 一 定 配置 ， 才 能 实现 跨 域 资 
源 共 享 。 下 面 我 们 就 来 介绍 配置 过 程 。 
(1) 下 载 资源 。 
下 载 http://shanbe.hezoun.com/cors.zip, 或 直接 从 下 载 文件 的 Tools 文件 夹 中 复制 cors.zip。 
将 其 解压 到 GeoServer 的 classes 文件 夹 中 。 如 果 是 默认 情况 ， 那 么 该 文件 夹 的 路 径 为 
“C:\Program Files\GeoServer 2.6.2\webapps\geoserver\WEB-INF\classes”。 
(2) 配置 web.xml。 
打开 “C:\Program Files\GeoServer 2.6.2\webapps\geoserver\ WEB-INF\web.xml”， 在 其 他 
filter 后 面 ， 加 入 如 下 配置 : 


<filter> 
<filter-name>cross-origin</filter-name> 
<filter-class>org.mortbay.servlets.CrossOriginFilter</filter-class 
<init-param> 
<param-name>allowedOrigins</param-name> 
<param-value>*</param-value> 
</init-param> 
<init-param> 
<param-name>allowedMethods</param-name> 
<param-value>GET,POST</param-value> 
</init-param> 
<init-param> 
<param-name>allowedHeaders</param-name> 
<param-value>x-requested-with,content-type</param-value> 
</init-param> 
</filter> 


然后 在 其 他 filter-mapping 之 后 ， 加 入 如 下 配置 。 


<filter-mapping> 
<filter-name>cross-origin</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
(3) 重新 启动 GeoServer。 


6.4.3 页 面 设计 与 代码 编写 


本 实践 要 实现 的 功能 是 在 费城 的 切片 地 图 上 显示 农贸 市 场 的 位 置 , 通过 单 击 某 农贸 市 场 ， 
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可 在 弹出 窗口 中 显示 更 多 信息 。 
(1) 新 建 一 个 目录 ， 例 如 Walkthrough10， 然 后 在 其 中 创建 一 个 空 的 文本 文件 ， 将 其 保 
存 为 Markets.html。 
如 果 读 者 熟悉 使 用 Visual Studio 或 Eclipse 等 集成 开发 环境 ， 那 么 尽 可 使 用 ， 这 些 集成 开 
发 环境 可 帮助 我 们 创建 HTML 文件 的 框架 。 
(2) 页 面 设计 。 
在 Markets.html 页 面 中 ， 加 入 如 下 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0， maximum-scale=1.0, 
user-scalable=0"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<title> 实 践 10: 费城 农贸 市 场 <ltitle> 
<link rel="stylesheet" href="http://cdnis.cloudflare.com/ajax/libs/openlayers/2.13.1/ theme/default/style.css"> 
<style> 
.smallmap { 
width: 512px; 
height: 512px; 
border 1px solid #cece; 


#docsp{ 
margin-bottom: 0.5em; 
b 
</style> 
<script sre="http://cdnis.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.is"> 
</script> 
<script> 
</script> 
</head> 
<body onload="init0"> 
<hl id="title'> 费 城 农贸 市 场 </hl> 


<div id="map" class="smallmap"></div> 
<divid="docs"> 


<p> 单 击 某 一 农贸 市 场 ， 获 取 更 多 信息 。</p> 


</div> 
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</body> 
</html> 
在 上 面 的 代码 中 ， 包 含 了 HTML 的 head 与 body 两 大 部 分 。 虽 然 做 了 部 分 简化 ， 但 大 部 
分 的 代码 是 从 OpenLayers 开发 者 实例 中 复制 过 来 的 。 
在 head 部 分 , 引用 了 运行 在 CloudFlare 服务 器 上 的 OpenLayers 的 JavaScript 文件 与 CSS 
样式 文件 。 此 外 ， 还 定义 了 两 个 样式 。 
在 body 部 分 ， 加 入 了 id 为 map 的 div， 其 样式 的 类 设置 为 了 smallmap。 该 类 在 head 部 
分 的 style 中 进行 了 定义 ， 规 定 了 地 图 的 宽 与 高 。 
下 面 就 需要 在 head 的 script 中 加 入 JavaScript 代码 ， 实 现 地 图 功能 。 
(3) 定义 全 局 变量 。 
在 <script> 与 </scripP 中 ， 加 入 如 下 代码 : 
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 
var toProjection = new OpenLayers.Projection("EPSG:900913"); // Web 墨 卡 托 投影 
Var map; 
function init() { 
} 
上 述 代码 定义 了 3 个 全 局 变量 ， 两 个 表示 空间 参照 系 的 变量 ， 一 个 是 表示 地 图 的 变量 。 
此 外 ， 还 创建 了 初始 化 函数 init0 的 框架 ， 我 们 需要 在 该 函数 中 实现 地 图 功能 。 
(4) 在 地 图 中 加 入 切片 图 层 。 
在 init0 函 数 中 ， 加 入 如 下 代码 : 


map = new OpenLayers.Map("map", { projection: toProjection }); 


/ 加 入 切片 图 层 
vartiles = new OpenLayers.Layer.XYZ( 


"PhillyBasemap", 
[ 
"http://localhost/PhillyBasemap/${z}/${x}/S{y}.png" 
J, 
attribution: "Data copyright OpenStreetMap contributors", 
spherical Mercator: true, 
wrapDateLine: true, 
numZoomLevels: 18 
1 
); 
map.addLayer(tiles); 


上 述 代码 首先 创建 了 一 个 地 图 对 象 ， 并 定义 了 其 坐标 系 。 然 后 创建 了 一 个 切片 图 层 ， 指 
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向 第 5 章 实 践 9 中 创建 的 发 布 在 IIS 中 的 PhillyBasemap 切片 地 图 。 
(5) 在 地 图 中 加 入 WMS 图 层 。 
接着 在 init0 函 数 中 加 入 如 下 代码 : 


/ 加 入 WMS 图 层 
varlayer = new OpenLayers.Layer.WMS( 
"WMS", "http://localhost:8080/geoserver/webgis/wms", 
{ 
LAYERS: 'webgis:FarmersMarkets', transparent: true 
}, 
{ 
singleTile: true, 
isBaseLayer: false 
上 
); 
map.addLayer(layer); 

上 述 代码 实现 了 将 农贸 市 场 WMS 图 层 合 加 在 切片 图 层 之 上 。 将 singleTile 属性 设置 为 
true， 表示 需要 WMS 服务 将 整个 地 图 窗口 中 数据 返回 为 一 张 图 像 ， 而 不 是 多 张 填充 地 图 窗口 
的 正方 形 图 像 。 

isBaseLayer 属性 同样 也 很 有 用 ， 它 确保 WMS 图 层 处 于 正确 的 顺序 ， 并 且 将 其 背景 设置 
为 透明 。 
(6) 居中 地 图 。 
接着 在 init() 函 数 中 加 入 如 下 代码 : 
/ 居中 地 图 
map.setCenter(new OpenLayers.LonLat(-75.145, 40).transform(fromProjection,toProjection), 11); 


由 于 到 城市 街区 尺度 大 概 对 应 的 是 20 级 ,因此 如 果 没 有 上 述 代 码 , 根本 显示 不 了 费城 地 
图 。 上 述 代 码 将 地 图 放大 到 11 级 ， 并 将 地 图 中 心 设置 为 费城 的 中 心 。 
(7) 实现 交互 功能 。 
仍然 在 init0 函 数 中 加 入 如 下 代码 : 


/ 实现 单 击 查询 功能 
Var info = new OpenLayers.Control. WMSGetFeatureInfo({ 
url: 'http://localhost:8080/geoserver/webgis/wms', 
title: ' 单 击 查 询 要 素 ', 
queryVisible: true, 
infoFormat: "application/json", 
eventListeners: { 
getfeatureinfo: function (event) { 
/ 解析 查询 得 到 的 响应 


125 


一 Web GIS 原理 与 应 用 开发 


varresponse = JSON.parse(event.text); 
if (response.features.length ! 一 0) { 
var returnedFeature = response.features[0]; 
/ 设置 弹出 窗口 
map.addPopup(new OpenLayers.Popup.FramedCloud( 
"农贸 市 场 信息 "， 
map.getLonLatFromPixel(event.xy), 
null, 
"<b>" + retumedFeature.properties. NAME + "</b><br />"+ 
returnedFeature.properties. ADDRESS, 
null, 
true 


); 


D; 


map.addControl(info); 

info.activate(); 

上 述 代码 实现 的 是 根据 用 户 的 单 击 位 置 nN | 
查询 到 点 击 的 要 素 ， 并 将 该 要 素 的 名 称 与 地 全 ReWDvivousnajworlingfeooksN sc| 有 以 间 |- 外 | 三 
址 显示 在 弹出 窗口 中 。 代 码 与 “6.3.3 查询 实 
例 ” 介 绍 的 查询 类 似 。 最 大 的 不 同 是 ， 在 上 “费城 农贸 市 场 
述 代 码 中 指定 要 求 从 WMS 返回 JSON 格 式 的 目 | 
响应 ， 而 不 是 HTML 格式 。JSON 格式 的 响 | 
应 本 身 就 是 一 个 JavaScript 对 象 , 因此 很 容易 | 
得 到 各 个 字段 的 值 。 入 

(8) 测试 程序 。 人 Cssiams 

用 Firefox 直接 打开 Markets.html 文件 ， PL XI | ro 
得 到 图 6.7 所 示 的 页 面 。 人 eh earden 国 

程序 运行 如 果 有 错误 ， 请 参看 下 载 文件 < 
“ Codes\Walkthroughl10 ”文件 夹 中 的 | 
Markets.html 文件 。 


点 击 某 一 农贸 市 场 。 获 取 更 多 信息 - 


6.7 程序 运行 效果 
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6.5 习 题 


(1) 利用 OpenLayers， 将 第 4 章 习题 要 求 发 布 的 WMS 图 层 革 加 到 一 切片 地 图 上 。 该 切 
片 地 图 可 以 是 第 5 章 习题 要 求 发布 的 切片 , 也 可 以 是 第 三 方 的 切片 地 图 , 例如 OpenStreetMap、 
必 应 地 图 等 。 要 求实 现 查询 WMS 服务 ， 将 要 素 的 详细 信息 显示 在 弹出 窗口 中 。 

(2) 仔细 阅读 GIS Stack Exchange 中 一 篇 关于 各 Web 地 图 API 比较 的 讨论 
(http://gis.stackexchange.com/questions/8032/how-do-various-javascript-mapping-libraries-compa 
re?rq=1) ， 然 后 寻找 分 别 使 用 OpenLayers、Leaflet 与 男 一 Web 地 图 API 构建 的 地 图 应 用 。 
分 析 其 源 代 码 ， 并 编写 一 文档 ， 说 明 如 下 内 容 : 


地 图 应 用 的 URL。 

地 图 应 用 使 用 了 哪些 API。 

在 地 图 中 包含 了 哪些 服务 与 图 层 。 

主要 使 用 了 API 哪些 类 与 功能 。 最 好 能 给 出 这 些 类 的 帮助 文档 的 链接 地 址 。 
通过 分 析 源 代码 ， 学 习 了 哪些 编码 技巧 。 

该 地 图 应 用 还 可 以 在 哪些 方面 进行 改进 。 
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从 本 章 可 以 学 习 到 : 


加 在 客户 端 绘 制 矢量 数据 的 优势 与 挑战 
%* 使 用 KML 矢量 数据 

必 使 用 GeoJSON 

”在 OpenLayers 中 符号 化 矢量 图 层 
在 OpenLayers 使 用 GeoJSON 图 层 
六 访问 用 户 KML 数据 


第 7 章 在 客户 端 绘制 矢量 数据 _ 


在 过 去 的 几 年 里 ,我 们 亲眼 目睹 了 在 Web 浏览 器 中 令 人 难以 置信 的 创新 和 进步 。 在 现代 
浏览 器 中 一 系列 全 新 的 功能 因 HTMLS5 而 出 现 。 在 HTMLS5 标准 提供 的 许多 功能 中 ,提高 GIS 
的 关键 在 于 HTML5 的 Canvas。Canvas 基本 上 是 在 浏览 器 中 动态 生成 的 一 个 位 图 。 

在 上 一 章 中 ,介绍 了 从 WMS 服务 得 到 一 张 服务 器 端 绘制 好 的 图 像 ， 将 其 作为 业务 专题 
图 层 。 该 方式 由 于 返回 的 是 一 张 图 像 ， 虽 然 用 户 可 以 通过 单 击 得 到 某 要 素 更 详细 的 信息 ， 但 
是 用 户 在 与 专题 图 层 交 互 时 ， 例 如 将 鼠标 移动 到 某 要 素 上 面 ， 应 用 程序 并 不 能 知道 并 显示 可 
选择 该 要 素 了 ， 因 此 交互 性 并 不 强 。 本 章 将 介绍 在 地 图 中 显示 专题 图 层 的 另 一 种 方式 ， 那 就 
是 将 原始 数据 发 送 到 客户 端 〈 例 如 一 个 网 页 浏览 器 )， 由 客户 端 负责 绘制 。 这 是 当前 许多 Web 
GIS 普遍 采用 的 方式 ， 所 有 的 复杂 的 符号 系统 和 地 图 绘制 功能 将 转移 到 客户 端 ， 使 服务 器 只 
需要 提供 原始 的 矢量 数据 和 属性 数据 。 这 意味 着 在 地 图 引擎 可 以 更 有 效 地 响应 ， 以 增强 交互 
性 以 及 提升 性 能 。 

本 章 将 介绍 两 类 可 发 送 到 浏览 器 中 常用 的 矢量 数据 格式 ， 分 别 是 KML 与 GeoJSON， 并 
演示 如 何在 OpenLayers 中 增加 这 两 类 图 层 。 


7.1 在 客户 端 绘制 矢量 数据 的 优势 与 挑战 


前 面 介 绍 的 都 是 从 服务 器 上 获取 图 像 显示 在 地 图 中 ， 不 管 是 通过 事先 绘制 的 切片 还 是 动 
态 绘制 的 WMS 地 图 。 另 一 种 方法 是 将 包含 要 素 空 间 坐标 与 属性 信息 的 文本 发 送 到 客户 端 ， 
然后 由 客户 端 负责 绘制 该 图 层 。 该 方式 如 果 使 用 得 到 , 可 明显 提升 Web GIS 的 速度 与 交互 性 。 

虽然 浏览 器 并 没有 GIS 的 概念 , 但 是 却 也 能 绘制 矢量 图 形 。 其 实 绘制 矢量 数据 也 不 复杂 ， 
就 是 将 屏幕 坐标 与 符号 连接 的 过 程 。Web 地 图 API 一 般 都 能 从 GeoJSON 或 KML 文件 中 读 取 
坐标 值 ， 然 后 转换 为 屏幕 坐标 ， 最 后 进行 绘制 。 


7.1.1 客户 端 绘制 矢量 数据 的 优势 


响应 速度 与 交互 性 是 在 客户 端 绘制 矢量 数据 的 最 主要 两 大 优势 。 一 旦 从 服务 器 获得 了 矢 
量 数 据 ，Web 地 图 用 户 与 数据 的 交互 就 非常 迅速 ， 不 会 有 任何 延迟 。 假 设 有 一 个 Web 地 图 显 
示 中 国 男 子 篮球 职业 联赛 的 所 有 球 队 ， 基 础 底 图 来 自 天 地 图 的 切片 图 层 ， 篮 球 球 队 数据 来 自 

-个 GeoJSON 文件 。 当 地 图 加 载 时， 浏览 器 获取 了 GeoJSON 文件 ， 其 包含 每 支 球 队 的 地 理 
坐标 以 及 所 有 其 他 属性 信息 。 现 在 用 户 可 以 单 击 每 支 球 队 查 看 其 信息 ， 但 不 再 需要 向 服务 器 
发 送 请 求 。 而 对 于 前 一 章 介 绍 的 农贸 市 场 混搭 应 用 ， 每 次 单 击 某 一 农贸 市 场 时 ， 都 需要 向 服 
务 器 发 送 一 个 WMS 的 GetFeatureInfo 请 求 。 

另外 ， 假 设 应 用 程序 需要 实现 用 户 每 次 将 鼠标 悬 停 在 某 球 队 上 时 ， 用 高 亮 符号 显示 该 球 
队 ， 以 便 提示 用 户 可 以 点 击 该 符号 。Web 浏览 器 可 以 用 非常 快 的 速度 实现 该 效果 。 但 是 ， 如 
果 每 次 悬 停 事件 都 需要 向 服务 器 发 送 请 求 ， 那 么 应 用 程序 必定 陷入 瘫 病 。 
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7.1.2 ”客户 端 绘制 矢量 数据 的 挑战 


虽然 客户 端 绘制 矢量 图 形 具有 相应 速度 快 与 交互 性 高 的 优势 ， 但 是 并 不 是 所 有 情况 都 适 
合 客户 端 绘制 矢量 。 如 果 需 要 同时 绘制 成 百 上 千 个 要 素 ， 或 者 绘制 包含 大 量 结 点 的 多 边 形 ， 
那么 更 佳 的 选择 可 能 是 在 服务 器 端 绘制 地 图 ， 然 后 将 其 发 送 到 客户 端 。 如 果 浏 览 器 一 次 绘制 
的 矢量 图 形 太 多 ， 那 么 响应 速度 就 会 变 得 极其 缓慢 。 此 外 ， 由 于 客户 端 必须 下 载 所 有 的 坐标 ， 
那么 传输 大 量 复杂 图 形 也 会 导致 网 络 堵塞 。 

为 了 保持 良好 的 性 能 ， 最 好 针对 每 个 比例 尺 ， 至 少 在 小 比例 尺 ， 将 要 在 客户 端 绘制 的 图 
层 数据 尽 可 能 地 进行 综合 。 例 如 ， 当 在 全 国 尺度 下 显示 我 国 国 界 时 ， 不 需要 使 用 一 个 包含 福 
建 省 每 一 个 很 小 的 沿海 岛屿 的 文件 。 只 有 放大 到 一 定 比例 尺 后 才 加 载 有 更 详细 数据 的 文件 。 

此 外 ， 标 注 也 是 在 浏览 器 端 绘制 图 形 的 另 一 个 挑战 。 虽 然 浏览 器 可 以 在 屏幕 上 给 定 的 坐 
标 绘制 文本 , 但 是 却 没有 像 GeoServer 与 TileMill 所 拥有 的 强大 的 标注 位 置 放置 算法 。 结 果 可 
能 是 标注 相互 车 加 。 比 较 好 的 方式 是 让 用 户 通 过 交互 方式 来 发 现 标 注 ， 当 用 户 单 击 某 要 素 时 ， 
将 标准 显示 在 弹出 窗口 或 HTML div 中 。 

最 后 ， 通 过 Web 浏览 器 所 提供 的 符号 的 选择 相对 比较 基本 。 可 以 在 浏览 器 中 绘制 图 形 
如 SVG 文件 ， 但 是 无 法 像 TileMill 或 ArcGIS 程序 一 样 绘制 复杂 的 线条 和 图 形 填 充 。 当 然 ， 
如 果 客 户 端 恰好 是 一 个 桌面 应 用 程序 (如 QGIS) ， 那 么 就 不 必 过 分 担心 可 用 符号 的 选择 。 


7.1.3 客户 端 如 何 绘制 矢量 数据 


Web 地 图 API 通常 都 提供 了 在 浏览 器 端 绘制 撩 量 图 层 的 类 , 但 是 不 同 的 API 使 用 的 类 名 
是 不 一 样 的 。 对 于 一 些 简单 的 独立 的 矢量 要 素 ， 可 能 使 用 的 是 名 为 marker 的 类 。 而 对 于 复杂 
的 图 层 ， 可 能 使 用 的 是 FeatureGroup (Leaflet) 或 FeatureLayer (ESRI) 类 。OpenLayers 中 的 
Layer.Markers 与 Layer.Vector 类 分 别 对 应 上 述 两 个 目的 。 

像 QGIS 这 样 的 客户 端 应 用 程序 可 查看 KML、GeoJSON、GML 以 及 其 他 多 种 文本 类 型 
的 矢量 要 素数 据 。 


7.1.4 ”从 服务 器 获取 数据 的 方法 


当 在 客户 端 定义 了 一 矢量 图 层 ， 那 么 需要 指定 客户 端 如 何 从 服务 器 上 获取 数据 。 需 要 注 
意 的 是 ， 客 户 端 从 服务 器 请 求 的 不 再 是 地 图 的 图 像 ， 而 是 要 获取 矢量 坐标 以 及 相关 的 属性 信 
息 , 每 个 Web 地 图 API 对 从 服务 器 获取 矢量 数据 的 方法 都 有 自己 的 专业 术语 , 在 OpenLayers 
中 称 为 策略 。 

从 服务 器 获取 矢量 数据 的 一 些 主流 方法 主要 有 以 下 一 些 。 

(1) 在 图 层 加 载 时 获取 所 有 的 数据 。 在 OpenLayers 中 ， 称 这 种 方法 为 Fixed 策略 
Chttp://dev.openlayers.org/docs/files/OpenLayers/Strategy/Fixed-js.html) 。 该 方式 在 初始 化 时 性 
能 会 有 所 损失 ， 但 是 此 后 再 也 不 需要 向 服务 器 发 送 其 他 请 求 ， 因 此 确保 了 应 用 程序 随后 的 响 
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应 速度 。 很 明显 ， 该 方法 对 于 非常 大 的 数据 量 不 适合 。 

(2) 只 获取 当前 地 图 视图 范围 内 的 数据 。 当 地 图 视图 改变 时 ， 再 向 服务 器 发 送 一 新 的 请 
求 。 在 OpenLayers 中 ， 该 方式 称 为 BBOX 策略 : http://dev.openlayers.org/docs/files/ 
OpenLayers/Strategy/BBOX-js.html。 

对 于 数据 量 大 的 矢量 文件 ， 一 次 将 所 有 数据 下 载 不 太 可 能 时 ， 这 种 方式 比较 合适 。 但 是 
当 用 户 快速 放大 缩小 或 平移 地 图 时 ， 应 用 程序 就 响应 不 过 来 了 。 一 种 改进 方式 是 考虑 保留 已 
经 请 求 的 要 素数 据 。 

(3) 根据 过 滤 或 查询 条 件 只 从 数据 集中 获取 部 分 要 素 的 矢量 数据 。 在 OpenLayers 中 ， 
该 方式 称 为 Filter 策略 : http://dev.openlayers.org/docs/files/OpenLayers/Strategy/Filter-js.html。 

该 方式 能 缩小 请 求 数据 的 范围 ， 既 避免 了 下 载 所 有 的 数据 ， 而 又 保留 了 Fixed 策略 的 高 
响应 效果 。 

此 外 ， 还 有 一 些 上 述 策略 的 改进 版 本 。 在 OpenLayers 中 ，Refresh 策略 〈http:/ 
dev.openlayers.org/ docs/files/ OpenLayers/Strategy/Refresh-js.html) 在 指定 的 时 间 间 隔 重新 获取 
所 有 数据 。 如 果 矢 量 数据 表示 的 是 不 断 变 化 的 现象 ， 例 如 舰队 、 车 队 等 ， 该 方式 就 非常 有 用 。 


7.2 使 用 KML 矢量 数据 


KML (Keyhole Markup Language，Keyhole 标记 语言 ) 由 于 可 通过 谷歌 地 球 、 谷 歌 地 图 
和 ArcGIS Explorer 等 许多 免费 应 用 程序 进行 查看 , 因此 成 为 了 GIS 中 矢量 要 素 的 一 种 非常 受 
欢迎 的 格式 。KML 是 基于 一 个 开放 规范 的 表达 地 理 标 记 的 XML 语言 。 该 开放 规范 原来 由 谷 
歌 维护 ， 不 过 现 已 成 为 OGC 标准 大 家 庭 中 的 一 员 。KML 可 以 由 要 素 和 栅 格 元 素 组 成 ， 这 些 
元 素 包 括 点 、 线 \ 面 和 影像 , 以 及 图 形 、 图 片 、 属 性 和 HTML 等 相关 内 容 。 尽管 通常 将 ArcGIS 
中 的 数据 集 视 为 独立 的 同类 元 素 〈 例 如 ， 点 要 素 类 只 能 包含 点 ， 栅 格 只 能 包含 像 元 或 像素 ， 
而 不 能 包含 要 素 ) ， 但 单个 KML 文件 却 可 以 包含 不 同类 型 的 要 素 ， 并 可 包含 影像 。 


7.2.1 KML 简介 


KML 中 最 重要 的 XML 标签 是 地 标 (placemark) ， 它 定义 了 一 些 地 理 要 素 、 一 些 符 号 以 
及 其 他 一 些 可 显示 在 弹出 窗口 中 的 额外 信息 。 读 者 可 下 载 http://dev.openlayers.org/releases/ 
OpenLayers-2.13.1/ examples/kml/sundials.kml 文件 ， 并 用 文本 编辑 器 打开 。 在 其 中 可 以 看 到 有 
许多 地 标 标签 ， 例 如 : 


<Placemark> 
<name>Sundial, Plymouth, Devon, UK</name> 
<description><![CDATA[The gnonom is 27 foot high, the pool has 21 feet diameter. It was designed by 
architect Carole Vincent from Boscastle in Comwall and was unvieled by Her Majesty the Queen on Friday July 
22nd 1988 for a cost of cost £70,000 . The sundial runs one hour and seventeen minutes behind local clocks. 
<img src="http://www.photoready.co.uk/people-life/images/sundial-fountain.jpg"> 
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JImage source:<a hre 合 "www.photoready.co.Uk</a>]> 
</description> 
<LookAt> 
<longitude>-4.142398271107962</longitude> 
<latitude>50.37145390235462</latitude> 
<altitude>0</altitude> 
<range>63.33410419881957</range> 
<tilt>0</tilt> 
<heading>-0.0001034131369701296</heading> 
</LookAt> 
<styleUrl>#msn_sunny_copy69</styleUrl> 
<Point> 
<coordinates>-4.142446411782089,50.37160252809223,0</coordinates> 
</Point> 
</Placemark> 


这 个 特定 的 地 标 只 有 一 个 坐标 , 包含 在 Point 标签 中 。 对 于 线 与 多 边 形 要 素 , 分 别 使 用 的 
是 LineString 与 Polygon 标签 。 
在 Description 标签 中 包含 的 是 HTML， 这 非常 适合 在 弹出 窗口 中 显示 。 


7.2.2 在 OpenLayers 中 使 用 KML 


-个 完整 的 KML 文件 相对 都 比较 长 ， 不 过 并 不 需要 我 们 从 头 解 析 KML 文件 。 当 前 大 多 
数 的 Web 地 图 API 都 提供 了 相关 类 来 访问 KML 文件 。 在 OpenLayers 中 ， 对 应 的 是 
OpenLayers.Layer.Vector 类 ,调用 该 类 时 只 需要 提供 KML 文件 所 在 的 路 径 , 解析 KML 文件 、 
显示 内 容 等 其 他 工作 全 部 由 OpenLayers 完成 。 
http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/sundials.html 连接 展示 了 如 
何 使 用 OpenLayers.Layer.Vector 类 , 将 一 个 KML 文件 作为 一 个 图 层 加 入 到 地 图 中 。 该 实例 主 
要 代码 如 下 : 


var sundials = new OpenLayers.Layer.Vector("KML", { 
projection: map.displayProjection, 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "kml/sundials.kml", 
format: new OpenLayers.Format. KML({ 
extractStyles: true, 
extractAttributes: true 
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map.addLayers([wms, sundials]); 


在 上 面 的 代码 中 ， 将 策略 设置 为 了 Fixed， 这 就 意味 着 当地 图 加 载 时 ， 将 KML 文件 中 的 
所 有 要 素 加 载 到 浏览 器 中 。 

KML 加 载 使 用 的 是 OpenLayers.ProtocoLHTTP ， 即 HTTP 协议 ,与 其 对 应 的 是 
OpenLayers.Protocol.SQL, 后 者 用 于 连接 数据 库 。 在 使 用 OpenLayers. Protocol.HTTP 访问 KML 
时 ， 要 指定 要 访问 数据 的 格式 为 OpenLayers.Format.KML， 以 及 指定 KML 文件 的 路 径 。 如果 
查看 OpenLayers.Format (http://dev.openlayers.org/docs/files/OpenLayers/Format-js.html)〉 的 帮 
助 文档 ， 可 以 看 出 可 以 在 地 图 中 加 载 很 多 格式 的 矢量 数据 。 


7.3 使 用 GeoJSON 


GeoJSON 也 是 一 个 在 Web 地 图 中 显示 矢量 数据 的 广泛 使 用 的 数据 格式 。 其 主要 特点 是 基 
于 Javascript 对 象 表示 法 。 在 GeoJSON 中 , 一 个 矢量 要 素 及 其 属性 使 用 一 个 JavaScript 对 象 来 
表示 ， 这 样 就 非常 方便 解析 其 几何 图 形 与 字段 。 


7.3.1 GeoJSON 简介 


对 于 同样 的 要 素 ， 相 对 于 KML 这 种 基于 XML 结构 的 格式 ，GeoJSON 要 小 许多 。 但 是 

GeoJSON 并 不 像 KML 那样 总 是 包含 样式 信息 。 需 要 在 客户 端 定义 样式 ， 这 意味 着 需要 编写 
- 些 JavaScript 代码 或 使 用 OpenLayers 中 的 默认 样式 。 

由 于 GeoJSON 简单 而 且 加 载 速度 快 ， 因 此 越 来 越 多 的 开发 者 更 愿意 使 用 GeoJSON。 

GeoJSON 可 以 描述 的 对 象 包括 几何 图 形 、 要 素 和 要 素 集 。 几 何 图 形 的 类 型 有 点 、 线 、 面 、 
多 点 、 多 线 、 多 面 与 几何 图 形 集合 。 要 素 包 含 了 几何 图 形 信息 以 及 附加 的 一 些 属性 信息 。 要 
素 集 即 为 要 素 的 集合 。 

下 面 展 示 的 是 一 包含 要 素 集 的 GeoJSON。 该 要 素 集 中 只 包含 了 一 个 要 素 (美国 蒙 大 拿 州 )， 
但 可 以 很 容易 扩展 以 包含 其 他 要 素 。 该 GeoJSON 的 主体 是 定义 该 州 边界 线 的 顶点 ， 但 是 也 包 
含 了 fips、name 等 少数 几 个 属性 。 


{"type":"FeatureCollection","features":[{"type":"Feature","id":"USA-MT","properties": {"fips":"30","name":" 
Montana"},"geometry":{"type":"Polygon","coordinates":[[[-104.047534,49.000239],[-104.042057,47.861036],[-104 
.047534,45.944106],[-104.042057,44.996596],[-104.058488,44.996596],[-105.91517,45.002073],[-109.080842,45.0 
020731,[-111.05254,45.0020731,[-111.047063,44.476286],[-111.227803,44.580348],[-111.386634,44.75561],[-111. 
616665,44.547487],[-111.819312.44.509148],[-111.868605.44.563917],[-112.104113.44.520102],[-112.241036.44. 
569394],[-112.471068,44.481763],[-112.783254,44.48724],[-112.887315,44.394132],[-113.002331,44.448902],[-11 
3.133778.44.772041].[-113.341901.44.782995],[-113.456917.44.865149],[-113.45144.45.056842],[-113.571933,45. 
128042],[-113.736241,45.330689],[-113.834826,45.522382],[-113.807441,45.604536],[-113.98818,45.703121],[-11 
4.086765,45.593582],[-114.333228,45.456659],[-114.546828,45.560721],[-114.497536,45.670259],[-114.568736,4 
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5.774321],[-114.387997.45.88386],[-114.492059.46.037214].[-114.464674.46.272723],[-114.322274.46.645155],[- 
114.612552,46.639678],[-114.623506.,46.705401],[-114.886399.46.809463],[-114.930214,46.919002],[-115.302646 
,47.187372],[-115.324554,47.258572],[-115.527201,47.302388],[-115.718894,47.42288],[-115.724371,47.696727],[ 
-116.04751,47.976051],[-116.04751,49.000239],[-111.50165,48.994762],[-109.453274,49.000239],[-104.047534,49 
-000239]]]}}]} 


在 上 面 的 GeoJSON 中 ， 该 JavaScript 对 象 包含 了 好 几 个 小 的 JavaScript 对 象 。 最 底层 是 
-个 多 边 形 对 象 ， 该 多 边 形 对 象 包含 在 一 个 要 素 对 象 中 ， 而 该 要 素 对 象 是 一 个 要 素 集 对 象 的 
-部 分 。GeoJSON 规范 (http://geojson.org/geojson-spec.html#introduction) 给 出 了 这 些 对 象 如 

何 组 织 的 详细 描述 。 虽 然 我 们 很 少 直接 读 写 GeoJSON 文件 , 但 是 熟悉 其 中 的 结构 还 是 非常 有 
必要 的 。 


7.3.2 在 OpenLayers 中 使 用 GeoJSON 


虽然 可 以 在 JavaScript 代码 文件 中 包含 GeoJSON， 但 是 为 了 使 用 与 维护 简便 ， 通 常 将 一 
个 GeoJSON 放 在 一 个 单独 的 文件 中 。 然后 在 代码 中 引用 该 文件 。 下 面 是 一 段 使 用 OpenLayers 
访问 GeoJSON 的 代码 : 


var vector = new OpenLayers.Layer.Vector("GeoJSON", { 
projection: "EPSG:4326", 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "geojson-reprojected.json", 
format: new OpenLayers.Format.GeoJSON() 
D 
D; 


上 面 的 代码 与 访问 KML 的 代码 非常 类 似 , 仅 有 的 区 别 是 OpenLayers.Protocol.HTTP 中 的 
url 与 format。url 属性 指向 JSON 文件 ， 可 以 是 完整 的 URL 或 相对 路 径 的 URL。 为 了 简单 ， 
这 里 省 略 了 将 该 图 层 加 入 到 地 图 中 的 代码 行 。 

当 使 用 任何 Web 地 图 API 创建 GeoJSON 图 层 时 ， 要 注意 API 是 如 何 要 求 定义 、 组 织 与 
引用 GeoJSON 文件 的 。 在 OpenLayers 中 可 以 引用 一 个 纯粹 的 GeoJSON, 但 是 在 Leaflet 中 则 
需要 将 GeoJSON 定义 为 一 个 JavaScript 对 象 ， 如 下 所 示 : 


Var <yourVariableName> = <yourGeoJSON>; 


在 QGIS 中 ， 可 将 任何 的 矢量 图 层 保存 为 GeoJSON， 而 且 大 多 数 Web 地 图 API 都 为 
GeoJSON 提供 非常 方便 使 用 的 类 , 将 其 显示 为 矢量 格式 。 在 商业 软件 领域 中 , ESRI 对 GeoJSON 
的 支持 不 怎么 积极 ， 反 而 推出 了 其 自身 的 基于 JSON 的 几何 图 形 格 式 
(http://resources.arcgis.com/en/help/arcgis-rest-api/02r3/02r3000000n1000000.htm)， 包 含 在 其 
GeoServices REST 规范 与 ArcGIS REST API 中 。 不 过 ，ESRI 也 已 非 正式 地 共享 一 个 开源 的 
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JavaScript 库 ， 以 便 进行 两 种 格式 之 间 进 行 转换 。 

GeoJSON 规范 还 不 是 一 个 OGC 的 规范 。 当 前 ，OGC 只 发 布 了 基于 XML 的 GML 规范 ， 
明显 还 缺乏 一 个 基于 JSON 的 定义 矢量 GIS 对 象 的 规范 。 这 种 缺乏 一 个 OGC 认可 的 JSON 规 
范 的 现象 , 引起 了 FOSS 社区 在 2013 辩论 OGC 是 和 否 应 该 采用 ESRI 的 生成 地 理 服务 REST 规 
范 。 该 规范 将 给 予 OGC 一 个 基于 JSON 的 GIS 数据 格式 , 但 有 些 人 担心 该 格式 与 一 家 商业 软 
件 公司 有 关联 ， 而 对 此 反对 。 


7.4 在 OpenLayers 中 符号 化 矢量 图 层 


当 在 浏览 器 中 获得 了 矢量 数据 之 后 ， 需 要 定义 绘制 要 素 的 符号 。 对 于 GeoJSON 这 类 不 包 
含 样式 的 数据 ， 不 可 能 像 从 服务 器 请 求 图 像 那样 得 到 事先 准备 好 的 样式 。 如 果 不 为 矢量 图 形 
定义 符号 ， 那 么 一 般 就 是 用 API 默认 的 符号 。 

可 以 直接 在 矢量 图 层 的 构造 函数 中 定义 样式 。 下 面 的 代码 演示 了 创建 一 个 GeoJSON 图 
层 ， 该 图 层 显 示 城 市 公园 〈 多 边 形 ) 。 在 构造 函数 中 通过 直接 定义 一 个 JSON 对 象 〈 加 粗 文 
字 ) 来 表示 样式 : 


var gardensLayer = new OpenLayers.Layer.Vector("Gardens", { 
projection: fromProjection, 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "gardens.geojson", 
format: new OpenLayers.Format.GeoJSON() 
»), 
style: { 
'strokeWidth': 4, 
"fillColor': ‘#ff00ff, 
'strokeColor': #B04173' 
} 
D; 


在 上 面 的 代码 中 ， 规 定 了 画笔 的 宽度 、 填 充 颜色 以 及 画笔 的 颜色 。 颜 色 使 用 的 是 十 六 进 
制 表示 法 。 上 述 代 码 指定 的 是 带 紫色 边线 品 红色 填充 的 多 边 形 符号 ， 如 图 7.1 所 示 。 在 编写 
代码 时 ， 可 使 用 在 线 颜色 拾取 工具 (http:/www.colorpicker.com/ ) 来 得 到 满足 需求 颜色 的 十 六 
进 制 值 。 
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图 7.1 在 矢量 图 层 类 中 直接 指定 样式 


在 浏览 器 中 绘制 矢量 图 层 的 一 个 优点 是 ， 可 以 快速 改变 样式 以 响应 某 些 事件 。 例 如 ， 当 
用 户 将 鼠标 悬 停 在 某 要 素 上 时 ， 可 以 改变 该 要 素 的 符号 的 颜色 。 在 OpenLayers 中 ， 可 以 使 用 
OpenLayers.Style 定义 不 同 的 样式 对 象 ， 并 把 它们 连接 到 地 图 事件 上 。 
OpenLayers.StyleMap 是 一 个 很 特别 的 对 象 ， 它 包含 多 种 样式 以 及 每 种 样式 使 用 的 规则 。 
下 面 的 代码 演示 了 当 某 一 公园 要 素 被 单 击 时， 该 被 选择 的 要 素 变 为 蓝 色 填充 。 
首先 ， 使 用 OpenLayers.Style 类 定义 非 选择 与 选择 状况 下 的 两 个 样式 对 象 。 
// 创建 样式 
/ 品 红色 填充 样式 
var gardenStyle = new OpenLayers.Style({ 
'stroke Width':4, 
"fillColor':'#ff00fF, 
'strokeColor':#B04173" 
D; 


// 蓝 色 填 充 样式 

var selectedGardenStyle = new OpenLayers.Style({ 
'stroke Width':4, 
'fillColor':'#00fFfb', 
'strokeColor":#0000 人 f 

D; 


然后 ， 使 用 OpenLayers.StyleMap 定义 默认 样式 与 选择 状 体 样式 。 


/ 指定 公园 使 用 的 默认 样式 与 选择 状态 样式 
Var gardenStyleMap = new OpenLayers.StyleMap( {'default': gardenStyle,'select': selectedGardenStyle} ); 


接着 在 初始 化 GeoJSON 图 层 时 ， 在 构造 函数 中 引用 该 StyleMap 对 象 〈 加 粗 文字 ) 。 


// 定义 公园 GeoJSON 图 层 
var gardensLayer = new OpenLayers.Layer.Vector("Gardens", { 
projection: fromProjection, 
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strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "gardens.geojson", 
format: new OpenLayers.Format.GeoJSON() 
D), 
styleMap: gardenStyleMap 
D; 
最 后 ， 在 地 图 中 加 入 一 个 OpenLayers.Control.SelectFeature 控件 。 该 对 象 监听 单 击 事件 ， 
并 根据 样式 映射 自动 对 选择 状态 与 非 选 择 状态 的 要 素 应 用 对 应 的 样式 。 


/ 监听 要 素 被 单 击 事件 

SelectControl = new OpenLayers.Control.SelectFeature(gardensLayer); 
map.addControl(selectControl); 

selectControl.activate(); 


通过 上 面 的 代码 ， 实 现 了 当 用 户 单 击 某 公 园 时 ， 用 蓝 色 填充 高 亮 表 示 。 当 用 户 单 击 了 其 
他 要 素 或 在 其 他 地 方 单 击 时 ， 原 来 被 选择 的 要 素 又 返回 原来 的 品 红色 填充 样式 。 


7.5 实践 11: 在 OpenLayers 使 用 GeoJSON 图 层 


该 实践 将 在 费城 切片 地 图 上 全 加 分 别 代表 城市 公园 与 食品 店 的 两 种 GeoJSON 图 层 。 用 户 
可 以 通过 单 击 某 公 园 或 食品 店 ， 查 看 该 要 素 的 名 称 。 被 单 击 的 要 素 将 改变 颜色 以 表示 被 选中 。 
(1) 准备 使 用 的 数据 。 
新 建 一 个 名 为 Walkthroughl1 的 文件 夹 ， 将 下 载 文件 的 “Data\Walkthrough11” 文 件 夹 中 
的 4 个 文件 复制 到 新 建 的 Walkthrough11 文件 夹 中 。 其 中 gardens.geojson 与 pantries.geojson 
分 别 是 公园 与 食品 店 矢量 数据 ， 另 外 的 pantries.svg 与 pantries_selected.svg 是 两 个 用 于 符号 化 
食品 店 的 SVG 文件 。 其 中 黄色 符号 用 于 非 选择 状态 的 要 素 ， 而 蓝 色 符号 用 于 被 选择 要 素 。 
对 于 .geojson 的 数据 , 可 以 通过 QGIS 导出 矢量 数据 来 得 到 。 而 且 “Ci\Program Files\QGIS 
Brighton\apps\qgis\svg” 文 件 夹 中 包含 了 QGIS 中 使 用 的 图 标 。 
(2) 设计 HTML 页 面 。 
在 Walkthrough11 文件 夹 中 增加 一 个 名 为 UseGeoJSON.html 的 文件 。 其 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta “name="viewport” content="width=device-width, initial-scale=1.0， maximum-scale=].0, 
user-scalable=0"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
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<title> 实 践 11: 费城 公园 与 食品 店 </title> 
<link re 上 "stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css"> 
<style> 
.smallmap { 
width: 512px; 
height: 512px; 
border 1px solid #ccce; 


#summaryLabel p { 
margin-bottom: 0.5em; 

</style> 

<script src="http://cdnjs.cloudflare.comy/ajax/libs/openlayers/2.13.1/OpenLayers.js"> 
</script> 

<script> 

</script> 
</head> 
<body onload="init()"> 

<hl id="title"> 社 区 公园 与 食品 店 </h1> 


<div id="map" class="smallmap"></div> 


<div id="summaryLabel"> 
<p> 单 击 地 图 中 的 公园 或 食品 店 获取 更 多 信息 </p> 
</div> 
</body> 
</html> 


(3) 定义 投影 与 地 图 对 象 。 
在 <script> 与 </scripf> 之 间 加 入 如 下 代码 ， 定 义 投影 与 地 图 对 象 。 


var fromProjection = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 
var toProjection = new OpenLayers.Projection("EPSG:900913"); // Web 墨 卡 托 投影 
Var map; 
function init() { 
map = new OpenLayers.Map("map", { projection: toProjection }); 

(4) 定义 费城 切片 地 图 图 层 。 
在 init0 加 入 如 下 代码 ， 定 义 费城 切片 地 图 图 层 。 
// 定义 费城 切片 地 图 图 层 


var tiles = new OpenLayers.Layer.XYZ( 
"PhillyBasemap", 
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[ 
"http://localhost/PhillyBasemap/${z}/$ {x}/${y}.png" 
]， 
attribution: "Data copyright OpenStreetMap contributors", 
spherical Mercator: true, 
wrapDateLine: true, 
numZoomLevels: 18 
b 


); 
(5) 定义 公园 矢量 图 层 。 
接着 在 init0 加 入 如 下 代码 ， 定 义 公园 矢量 图 层 。 


/ 品 红色 填充 样式 ， 用 于 未 被 选择 的 公园 要 素 
var gardenStyle = new OpenLayers.Style({ 
'stroke Width': 4, 
'fillColor': '#ff00fF, 
'strokeColor': #B04173' 


D; 


// 蓝 色 填 充 样 式 ， 用 于 被 选择 公园 要 素 

var selectedGardenStyle = new OpenLayers.Style({ 
'stroke Width': 4, 
'fillColor': '#00fFfb', 
'strokeColor': #0000 人 fr 


»; 


/ 为 公园 图 层 定义 样式 映射 


在 客户 端 绘制 矢量 数据 - 


var gardenStyleMap = new OpenLayers.StyleMap( { 'default': gardenStyle, 'select': selectedGardenStyle }); 


// 定义 公园 GeoJSON 图 层 
var gardensLayer = new OpenLayers.Layer.Vector("Gardens", { 
projection: fromProjection, 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "gardens.geojson", 
format: new OpenLayers.Format.GeoJSON() 
DD), 
styleMap: gardenStyle Map 
D; 


(6) 定义 食品 店 矢量 图 层 。 
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接着 在 init0) 加 入 如 下 代码 ， 定 义 食品 店 矢量 图 层 。 


/ 黄色 符号 用 于 未 选择 的 食品 店 要 素 
var pantryStyle = new OpenLayers.Style({ 
externalGraphic: 'pantries.svg’, 
graphicWidth: 25, 
graphicHeight: 25, 
graphicYOffset: 0 
D; 


/ 蓝 色 符 号 用 于 被 选择 的 食品 店 要 素 

var selectedPantryStyle = new OpenLayers.Style({ 
externalGraphic: 'pantries selected.svg’, 
graphicWidth: 25, 
graphicHeight: 25, 
graphicYOffset: 0 

D; 


// 为 食品 店 图 层 定义 样式 映射 
var pantryStyleMap = new OpenLayers.StyleMap( { 'default’: pantryStyle, 'select': selectedPantryStyle }); 


// 定义 食品 店 GeoJSON 图 层 
Var pantriesLayer = new OpenLayers.Layer.Vector("Pantries", { 
projection: fromProjection, 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "pantries.geojson", 
format: new OpenLayers.Format.GeoJSON() 
»), 
styleMap: pantryStyleMap 
D; 
上 面 的 代码 演示 了 如 何 使 用 .svg 文件 作为 符号 。 由 于 食品 店 是 点 图 层 ， 因 此 不 需要 设置 
画笔 与 填充 颜色 。 
(7) 在 地 图 中 加 入 图 层 。 
接着 在 init0 加 入 如 下 代码 ， 用 于 实现 在 地 图 中 加 入 上 面 定义 的 3 个 图 层 ， 并 将 地 图 调整 
到 合适 的 比例 级 别 。 


map.addLayers( [tiles, gardensLayer, pantriesLayer]); 
map.setCenter(new OpenLayers.LonLat(-75.15, 40).transform(fromProjection, toProjection), 12); 


在 上 面 的 代码 中 ， 演 示 了 如 何 使 用 数组 ， 一 次 将 3 个 图 层 加 入 到 地 图 中 。 
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(8) 加 入 事件 监听 控件 。 
接着 在 init0 加 入 如 下 代码 ， 加 入 监听 要 素 选择 与 取消 选择 事件 的 控件 。 


/ 监听 要 素 选择 与 取消 选择 事件 

var selectControl = new OpenLayers.Control.SelectFeature([gardensLayer, pantriesLayer], { 
‘onSelect: onFeatureSelect, 
onUnselect onFeatureUnselect 

D; 


map.addControl(selectControl); 
selectControl.activate(); 


上 面 的 代码 将 一 个 新 的 SelectFeature 控件 加 入 到 了 地 图 中 ， 该 控件 用 于 监听 要 素 的 单 击 
事件 。 在 SelectFeature 控件 的 构造 函数 中 ， 通 过 第 一 个 参数 ， 同 时 将 公园 图 层 、 食 品 店 图 层 
与 该 控件 进行 了 绑 定 。 

此 外 ， 在 定义 SelectFeature 控件 的 构造 函数 中 ， 还 引用 了 两 个 函数 ，onFeatureSelect 与 
onFeatureUnselect， 分 别 用 于 处 理 选 中 与 取消 选中 事件 。 在 下 一 步 需要 实现 这 两 个 函数 。 

(9) 加 入 要 素 选 中 与 取消 选中 事件 处 理 函 数 。 

在 init0 加 入 如 下 代码 ， 处 理 要 素 选中 与 取消 选中 事件 。 


/ 处 理 要 素 选中 事件 
function onFeatureSelect(feature) { 
var featureName = feature.attributes.name || "无 名 称 要 素 "; 
/ 插入 一 段 HTML， 显 示 要 素 的 名 称 
document.getElementByld('summaryLabel).innerHTML = '<p style="font-size:18px"><b>' + 
featureName + '</b></p>"; 
b 


// 处 理 要 素 取消 选中 事件 
function onFeatureUnselect(feature) { 
// 将 HTML 返回 到 原始 状态 
documentgetElementById(summaryLabel).innerHTML = '<p> 单 击 地 图 中 的 公园 或 食品 店 获取 更 多 
信息 </p>'; 

} 

上 述 两 个 函数 是 由 SelectFeature 控件 触发 的 事件 处 理 函 数 。 当 用 户 单 击 某 要 素 时 ， 触 发 
onFeatureSelect 函数 。 该 函数 首先 获取 被 选择 的 GeoJSON 要 素 的 name 属性 ， 如 果 没 找到 ， 
则 将 其 设置 为 “无 名 称 要 素 ”, 然后 将 名 为 summaryLabel 的 div 中 的 内 容 替 换 为 要 素 的 名 称 。 

当 用 户 取消 选择 某 要 素 时 将 触发 onFeatureUnselect 函数 , 该 函数 将 名 为 summaryLabel 的 
div 中 的 内 容 设置 为 初始 值 。 

(10) 运行 与 调试 程序 。 
用 Firefox 等 浏览 器 直接 打开 UseGeoJSON.html 文件 , 单 击 公园 与 食品 店 要 素 , 查看 是 否 
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改变 符号 ， 以 及 是 否 在 地 图 下 方 显示 该 要 素 的 名 称 。 程 序 运 行 效果 如 图 7.2 所 示 。 程 序 运 行 
如 果 有 错误 ， 请 参看 下 载 文 件 “Codes\Walkthrough11” 文 件 夹 中 的 UseGeoJSON.html 文件 。 
- oN 


实 中 11 : 费城 公司 与 食品 店 x 【viE 


国 fileV//DyLiuGuang/working/booksw 了 CC 是 -| 三 


社区 公园 与 食品 店 


ClTY GENTER WEST 


SHITY GE! 


Daty copyrithe OpenStref Map; Gontributors 


Spring Garden Community Garden 


图 7.2 程序 运行 效果 


7.6 ”实践 12: 访问 用 户 KML 数据 


在 上 一 个 实践 中 ， 演 示 了 如 何 访问 服务 器 端的 GeoJSON 数据 ， 在 本 实践 中 将 介绍 KML 
数据 的 访问 。 此 外 ， 本 实践 还 将 演示 如 何 访问 用 户 自 己 的 数据 ， 而 不 是 服务 器 端的 数据 。 该 
功能 的 实现 得 益 于 HTML5 中 的 文件 API。 当 用 户 拖 入 本 地 的 KML 文件 后 ， 地 图 将 显示 该 文 
件 包 含 的 矢量 要 素 ， 用 户 单 击 要 素 时 ， 将 弹出 一 个 小 窗口 以 显示 KML 文件 中 该 要 素 的 
description 字段 内 容 。 


7.6.1 页 面 设 计 


新 建 一 个 名 为 Walkthrough12 的 文件 夹 ， 在 其 中 新 建 名 为 UserFiles.html 的 文件 。 在 其 中 
加 入 如 下 代码 : 


<!DOCTYPE html> 
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7.6.2 ”功能 实现 


(1) 在 地 图 中 加 入 图 层 。 
在 <script> 与 </scripf> 之 间 加 入 如 下 代码 ， 定 义 投影 、 地 图 对 象 与 两 个 图 层 对象 ， 以 及 将 
图 层 加 入 到 地 图 中 ， 并 设置 到 恰当 的 显示 级 别 与 范围 。 
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Var WGS84 =new OpenLayers.Projection("EPSG:4326"); // WGS 1984 
var mercator = new OpenLayers.Projection("EPSG:900913"): // Web 墨 卡 托 投影 
Var map; 
function init() { 
map = new OpenLayers.Map("map"); 


// 使 用 OpenStreetMap 作为 基础 底 图 
Var baseLayer = new OpenLayers.Layer.OSM(""); 


Var ViewLayer = new OpenLayers.Layer.Vector(™", { 
projection: WGS84, 
styleMap: new OpenLayers.StyleMap({ 
fillColor: "blue", 
strokeColor: "blue", 
stroke Width: 3 
) 
外 
map.addLayers([baseLayer, viewLayer]); 
Var lonlat = new OpenLayers.LonLat(0, 0).transform(WGS84, mercator); 
map.setCenter(lonlat, 3); 
} 
当前 viewLayer 是 一 个 空 图 层 ， 当 用 户 拖 入 文件 后 ， 再 填充 其 数据 内 容 。 
(2) 判断 浏览 器 是 否 支持 HTML5 文件 API。 
在 浏览 器 中 读 取 本 地 文件 是 HTML5 的 最 大 亮点 之 一 。 不 过 有 一 些 老 版 本 的 浏览 器 并 不 
支持 HTMLS 的 文件 API， 因 此 首先 需要 判断 浏览 器 是 否 具有 该 功能 。 
继续 在 init0 函 数 中 加 入 如 下 代码 ， 用 于 判断 浏览 器 是 否 支持 HTML5 文件 API。 
Var Shortdesc = document.getElementById(shortdesc); 
if (!window.FileList || !window.FileReader) { 
shortdesc.textContent = ' 你 的 浏览 器 不 支持 本 地 文件 API。'; 
retum; 
} 
(3) 实现 文件 拖 放 功 能 。 
文件 拖 放 也 是 HTMLS5 的 一 大 亮点 ， 可 以 直接 将 本 地 电脑 上 的 文件 拖 搜 到 网 页 中 。 这 种 
直接 拖 放 文 件 至 浏览 器 的 做 法 让 传统 的 表单 或 者 Flash 上 传 黯然 失色 ， 极 大 提升 了 用 户 体验 。 
要 实现 文件 拖 放 ， 首 先 要 确定 文件 拖 放 区 域 ， 对 于 本 实践 来 说 最 佳 选择 当然 就 是 地 图 。 
然后 就 是 设置 其 监听 文件 拖 放 事件 。 必 须要 绑 定 的 事件 有 dragover 和 drop， 其 他 的 都 可 以 不 
绑 定 。dragover 和 drop 事件 的 处 理 函数 内 必须 调用 事件 的 preventDefault() 函数 , 否则 浏览 器 
会 进行 默认 处 理 ， 比 如 对 于 文本 类 型 的 文件 会 直接 打开 ， 非 文本 的 文件 可 能 会 弹出 一 个 下 载 
文件 框 。 
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继续 在 init0 函 数 中 加 入 如 下 代码 ， 以 实现 文件 拖 放 功能 。 


var fileDrop = document.getElementById('map'); 
fileDrop.addEventListener("dragenter", function (evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 
}, false); 


fileDrop.addEventListener("dragover", function (evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 

}, false); 


fileDrop.addEventListener("drop", function (evt) { 
evt.stopPropagation(); 
evt.preventDefault(); 
if (evt.dataTransfer.files[0]) { 
handleFile(evt.dataTransfer.files[0]); 


} 
}, false); 


(4) 利用 文件 API 读 用 户 拖 入 的 文件 。 
通过 拖 放 事件 的 dataTransfer 可 获取 数据 传递 对 象 ， 该 对 象 中 最 重要 的 是 files 属性 ， 它 
是 用 户 拖 放 进 浏 览 器 的 文件 列表 ， 是 一 个 FileList 对 象 ， 有 length 属性 ， 可 以 通过 下 标 访问 
其 中 某 个 文件 。 
上 述 代码 指定 了 使 用 handleFile 函数 来 处 理 用 户 拖 入 的 文件 。 那 么 在 该 函数 中 需要 读 入 
KML 数据 ， 并 将 数据 加 入 到 viewLayer 图 层 对 象 中 。 
继续 在 init0 函 数 中 加 入 如 下 代码 ， 实 现 解析 文件 并 在 viewLayer 图 层 中 加 入 要 素数 据 。 
var handleFile = function (file) { 
Var reader = new FileReader(); 
reader.onload = function (evt) { 


if (evt.error) { 
readerror(); 
return; 

和 


var results = null; 

var content = evt.target.result; 

Var engine = new OpenLayers.Format[KML'({ 
intemalProjection: mercator, 
externalProjection: WGS84, 
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extractStyles: true 
D); 


try{ 

Tesults = engine.read(content); 
} catch (©) { 
} 


if (Iresults || !results.length) { 

readerror(); 

Teturn; 
viewLayer.destroyFeatures(); 
viewLayer.addFeatures(results); 
map.zoomToExtent(viewLayer.getDataExtent()); 


} 
reader.readAsText(file); 


} 


function readerror() { 
Shortdesc.textContent = " 拖 入 的 文件 不 是 标准 的 KML 文件 。"; 


} 
要 读 取 文 件 ， 必 须 使 用 FileReader 接口 ， 该 接口 提供 了 读 取 文件 的 方法 以 及 文件 读 取 后 
的 事件 模型 。 
在 上 面 的 代码 中 ， 首 先 新 建 了 一 个 FileReader 对 象 ， 然 后 调用 了 其 readAsText0 方 法 ， 按 
照 文本 文件 的 方式 读 取 文 件 ， 文 件 读 取 完 成 后 将 触发 onload 事件 。 因 此 第 三 步 是 该 事件 的 处 
理 函 数 , 在 该 函数 中 利用 事件 对 象 的 target.result 获得 文件 内 容 , 接着 利用 OpenLayers.Format 
将 文件 内 容 解 析 为 要 素 几何 对 象 ， 并 加 入 到 viewLayer 图 层 中 。 
(5) 查看 要 素描 述 内 容 。 
KML 文件 中 每 个 要 素 一 般 都 包含 一 描述 信息 ， 可 显示 在 弹出 窗口 中 。 要 实现 该 功能 , 便 
需要 处 理 viewLayer 图 层 的 要 素 选择 与 取消 选择 事件 。 
继续 在 init0 函 数 中 加 入 如 下 代码 ， 以 实现 查看 要 素描 述 内 容 。 
// 监听 要 素 选 择 与 取消 选择 事件 
Var selectControl = new OpenLayers.Control.SelectFeature(viewLayer, { 
onSelect: onFeatureSelect 
‘onUnselect: onFeatureUnselect 
D; 


map.addControl(selectControl); 
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selectControl.activate(); 


/ 处理 要 素 选中 事件 
function onFeatureSelect(feature) { 
Var content = "<h2>" + feature.attributes.name + "</h2>" + feature.attributes.description; 
if (content.search("<script") != -1) { 
content= "内 容 中 包含 Javascript 代码 ! 将 跳 过 这 些 内 容 。<br>" + content.replace(/</g, "&lt:;"); 
} 
popup =new OpenLayers.Popup.FramedCloud("chicken", 
feature.geometry.getBounds().getCenterLonLat(), 
new OpenLayers.Size( 100, 100), 
content, 
null, true, onPopupClose); 
feature.popup = popup; 
map.addPopup(popup); 
b 


/ 处理 要 素 取消 选中 事件 
function onFeatureUnselect(feature) { 
if (feature.popup) { 
map.removePopup(feature.popup); 
feature.popup.destroy(); 
delete feature.popup; 
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function onPopupClose(evt) { 
selectControl.unselectAll(); 

} 

(6) 程序 运行 与 调试 。 

用 Firefox 等 浏览 器 直接 打开 UserFiles.html 文件 , 从 资源 管理 器 或 桌面 中 将 一 个 KML 文 
件 拖 入 到 地 图 中 ， 并 可 显示 该 文件 中 包含 的 矢量 数据 。 程 序 运行 效果 如 图 7.3 所 示 ， 拖 入 的 
是 下 载 文件 “DataAKML ”文件 夹 中 的 sundials.kml 文件 。 程 序 运行 如 果 有 错误 ， 请 参看 下 载 
文件 “Codes\Walkthrough12” 文 件 夹 中 的 UserFiles.html 文件 。 
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图 7.3 程序 运行 效果 
7.7 习 题 


(1) 编写 一 个 Web GIS 应 用 程序 ， 实 现 如 下 功能 : 


使 用 第 5 章 习 题 指定 创建 的 切片 地 图 或 OpenStreetMap 作为 基础 底 图 。 

从 互联 网 上 或 自己 创建 矢量 图 层 登 加 在 基础 底 图 上 。 和 撩 量 图 层 的 格式 是 KML 或 
GeoJSON。 可 使 用 谷歌 地 球 或 谷歌 地 图 创建 KML， 可 使 用 QGIS 创建 GeoJSON。 
实现 用 户 点 击 要素 时 ， 使 用 不 同 的 符号 显示 该 要 素 ， 并 显示 其 详细 信息 。 


(2) 利用 HTML5 文件 API， 编 写 一 个 Web GIS 应 用 程序 ， 实 现 如 下 功能 : 


使 用 OpenStreetMap 作为 基础 底 图 。 
支持 用 户 将 本 地 KML、GPX 与 OSM 文件 拖 入 到 地 图 中 ， 显 示 其 中 的 失 量 数据 ， 并 
支持 通过 单 击 显示 被 选 要 素 的 详细 属性 信息 。 


主流 JavaScript 框架 的 
使 用 与 专题 制图 


从 本 章 可 以 学 习 到 : 

# 主流 JavaScript 框架 

部 OpenLayers 的 控件 

基于 属性 值 符号 化 图 层 

使 用 OpenLayers 与 Dojo 进行 专题 制图 


一 Web GIS 原理 与 应 用 开发 


在 前 面 的 内 容 中 介绍 了 如 何 创建 不 同类 型 的 图 层 ， 并 使 用 OpenLayers 将 它们 合 加 在 一 张 
地 图 上 。 在 大 多 数 情况 下 ， 对 于 一 些 简单 的 Web GIS 应 用 只 需要 在 基础 底 图 上 谷 加 一 些 专题 
点 ， 以 及 少数 几 个 弹出 窗口 就 满足 用 户 的 需求 量 。 事 实 上 ， 对 于 许多 从 未 将 数据 以 地 理 信息 
方式 展现 的 用 户 ， 当 看 到 自己 的 数据 呈现 在 这 些 基本 Web 地 图 上 时 就 已 经 很 兴奋 了 。 不 过 ， 
随 着 Web GIS 的 大 众 化 ， 人 们 希望 地 图 图 层 包含 更 多 信息 以 及 交互 性 更 强 。 

本 章 将 介绍 引入 主流 JavaScript 框架 ， 增 强 Web 地 图 的 用 户 体验 。 并 通过 专题 制图 ， 以 
更 丰富 的 形式 展现 空间 信息 。 


8.1 主流 JavaScript 框架 


随 着 Web 2.0 的 发 展 ， 在 不 是 很 影响 性 能 的 情况 下 ， 开 发 者 都 习惯 把 能 用 浏览 器 做 的 事 
情 都 由 浏览 器 来 完成 ， 以 减轻 服务 器 的 压力 和 带宽 费用 等 ， 否 则 浏览 器 端 所 承载 的 工作 越 来 
越 大 。 因 此 JavaScript 已 经 成 为 了 Web 开发 最 基本 的 要 求 之 一 。 而 在 现实 的 敏捷 开发 中 ， 我 
们 通常 会 选择 一 个 JavaScript 框架 来 取代 烦琐 的 从 头 编写 。 这 样 会 节省 很 多 的 时 间 ， 写 代码 也 
很 清晰 、 便 捷 。 

当前 流行 的 开源 JavaScript 框架 有 Prototype、jQuery、Mootools、Dojo 与 Ext JS 等 。 具 
体 可 以 从 以 下 几 个 方面 来 选择 使 用 哪个 框架 : 

(1) 项 目 需求 〈 即 需要 哪些 特性 ， 例 如 是 否 要 求 做 出 精美 的 界面 、 特 效 或 其 他 功能 ) ; 

(2) 是 否 支 持 A 等 级 的 浏览 器 (IE、Firefox 等 ) ; 

(3) 文档 的 质量 : 是 否 完善 〈 包 含 教程 、API 和 代码 示例 等 ) ; 

(4) 框架 的 可 扩展 性 如 何 ? 为 框架 写 插件 容易 吗 ? 

(5) 是 否 喜欢 它 的 API 的 风格 ? 

(6) 能 从 多 大 程度 上 统一 JavaScript 代码 的 风格 ? 

(7) 框架 大 小 〈 太 大 的 框架 会 导致 用 户 下 载 时 间 的 延长 ) ; 

(8) 框架 是 否 强迫 改变 写 HTML 的 方式 (Dojo 就 是 这 样 ) ? 

(9) 代码 执行 速度 : 性 能 如 何 ? 

(10) 代码 是 否 为 模块 化 (Mootools 为 高 度 模 块 化 ) ? 代码 可 重用 性 如 何 ? 


8.1.1 jQuery 


jQuery 的 主页 为 http:/wwwjquery.com/。jQuery 的 优点 包括 : 
(1) 简洁 的 设计 思想 : 几乎 所 有 操作 都 是 以 选择 DOM 元 素 (有 强大 的 Selector) 开始 ， 
然后 是 对 其 操作 (Chaining 等 特性 ) 。 
(2) 容易 小 ， 压 缩 后 代码 只 有 20K 多 一 些 (无 压缩 代码 94K) 。 
(3) Selector 和 DOM 操作 的 方便 。 
(4) 链 式 语法 : 总 是 返回 一 个 jQuery 对 象 ， 可 以 连续 操作 。 


n 
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例如 如 下 代码 : 
$("p.surprise").addClass("ohmy").show("slow"); 


相当 于 首先 查找 HTML 的 <p> 标 签 ， 且 其 class 为 “surprise” 的 DHTML DOM 对 象 ， 然 
后 将 其 Class 属性 多 加 上 一 个 “ohmy” (通常 是 配 CSS 的 定义 做 显示 时 的 配色 修改 ) ;最 后 
打开 显示 。 

(5) 文档 的 完整 与 易 用 性 〈 每 个 API 都 有 完整 的 例子 ， 这 是 其 他 框架 现在 不 能 比 的 ) ， 
而 且 在 互联 网 上 还 有 很 多 其 他 的 文档 和 书籍 。 

(6) 广泛 的 应 用 ， 包 括 Google 代码 也 使 用 了 jQuery。 

(7) 简洁 和 简短 的 语法 ， 容 易 记 忆 。 

(8) 可 扩展 性 : 有 大 量 用 户 开 发 的 插件 可 供 使 用 〈http:Wiquery.com/plugins/) 。 

(9) jQuery 的 用 户 界 面 库 (http://jquery.com/plugins/， 基于 jQuery, 但 其 与 核心 的 jQuery 
是 独立 的 ) 一 直 在 不 断 发 展 中 ， 包 括 拖 放 、 缩 放 、 对 话 框 、 标 签 页 等 多 个 组 件 。 

(10) 事件 处 理 有 很 多 方便 的 方法 ， 如 click， 而 不 是 单一 的 addEvent 之 类 的 。 

但 是 正 由 于 设计 思想 是 追求 高 效 和 简洁 ， 没 有 面向 对 象 的 扩展 ， 因 此 在 设计 思路 上 与 
Mootools 不 一 样 。 


8.1.2 Mootools 


Mootools 的 主页 为 http:// www.mootools.net/。Mootools 在 设计 上 采用 了 面向 对 象 的 设计 
思想 。Mootools 跟 Prototype 相 类 似 ， 语 法 几乎 一 样 。 但 它 提供 的 功能 要 比 Prototype 多 ， 而 
且 更 强大 。 

其 主要 优点 包括 如 下 一 些 : 

(1) 模块 化 ， 而 且 各 模块 代码 非常 独立 ， 最 小 的 核心 只 有 8K， 最 大 的 优点 是 可 选择 使 
用 哪些 模块 ， 在 使 用 的 时 候 只 导入 使 用 的 模块 即 可 ， 完 整 的 也 不 到 180K (没有 压缩 ， 压 缩 
后 不 到 70K。 

(2) 语法 简洁 、 直 观 。 

(3) 特效 : 这 一 点 比 jQuery 稍 强 ， 现 在 也 正在 开发 Mootools 用 户 界面 库 。 

(4) 代码 易 阅 读 与 修改 。 

(5) 文档 完整 (最 新 的 1.2beta 的 文档 比 以 前 更 详细 ) 。 

Mootools 的 缺点 是 修改 了 低层 的 一 些 类 ， 如 Array 和 String 等 ， 这 也 是 设计 思想 的 不 同 。 
此 外 ， 在 DOM 和 CSS 选择 器 也 不 如 jQuery 强大 。 


8.1.3 Ext JS 


Ext JS 的 主页 为 http:// www.extjs.com/。Ext JS 在 设计 上 采用 了 组 件 化 思想 ， 推 进 了 互联 
网 应 用 (Rich Internet Application，RIA) 。 
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ExtJS 主要 包含 如 下 一 些 优点 : 

(1) 强大 的 用 户 界面 库 ， 而 且 性 能 不 错 ， 这 是 其 最 大 的 优点 。 

(2) 不 管 是 用 户 界 面 库 还 是 其 他 模块 ， 响 应 速度 都 比较 快 。 

(3) 100% 面 向 对 象 和 组 件 化 的 思想 ， 使 用 一 致 的 语法 和 全 局 的 命名 空间 。 

(4) 文档 完整 、 规 范 、 方 便 。 

(5) 活跃 的 社区 ， 迅 速 增加 的 用 户 量 。 

(6) 模块 化 实现 ， 可 扩展 性 强 。 

(7) 所 有 的 小 部 件 都 可 直接 使 用 ， 而 不 需要 进行 设置 (当然 , 用 户 可 以 选择 重新 配置 ) 。 

Ext JS 的 最 大 缺点 是 稍 复杂 ， 是 以 重量 级 的 框架 〈 包 含 大 量 UI) ， 体 积 大 。 如 果 导 入 
ext-alljs， 压 缩 后 也 有 近 500K。 


8.1.4 Dojo 


Dojo 的 主页 为 http://dojotoolkit.org/。 Dojo 是 一 个 JavaScript 实 现 的 开源 DHTML 工具 包 。 
Dojo 的 最 初 目标 是 解决 开发 DHTML 应 用 程序 遇 到 的 一 些 长 期 存在 的 历史 问题 . Dojo 先进 的 
功能 特点 有 : 

(1) 更 容易 地 为 Web 页 面 添加 动态 能 力 ， 可 以 在 其 他 支持 JavaScript 的 环境 中 使 用 
Dojo; 

(2) 利用 Dojo 提供 的 组 件 ， 可 以 提升 Web 应 用 程序 的 可 用 性 和 交互 能 力 ; 

(3) Dojo 设计 的 包 加 载 机 制 和 模块 化 的 结构 ， 能 保持 更 好 的 扩展 性 ， 提 高 执行 性 能 ， 
减轻 了 用 户 开 发 的 工作 量 ， 并 保持 一 定 的 灵活 性 〈 用 户 可 以 自己 编写 扩展 ) ; 

(4) Dojo 在 很 大 程度 上 屏蔽 了 浏览 器 之 间 的 差异 性 ， 因 此 不 必 再 担心 Web 页 面 是 否 在 
某 些 浏览 器 中 可 用 ; 

(5) 通过 Dojo 提供 的 工具 ， 还 可 以 为 代码 编写 命令 行 式 的 单元 测试 代码 ; 

(6) Dojo 的 打包 工具 可 以 帮助 优化 JavaScript 代码 ， 并 且 只 生成 部 署 应 用 程序 所 需 的 
最 小 Dojo 包 集合 。 

Dojo 主要 由 三 大 模块 组 成 ， 分 别 是 Core、Dijit 和 DojoX。Core 提供 Ajax、 事 件 、 基 于 
CSS 的 查询 、 动 画 以 及 JSON 等 相关 操作 API。Dijit 是 一 个 可 更 换 皮肤 ， 基 于 模板 的 Web 界 
面 控件 库 ， 包 含 许多 简单 易 用 的 小 部 件 (Widget) 。DojoX 包括 一 些 新 颖 的 代码 和 控件 ， 例 
如 DateGrid、Chart、 离 线 应 用 和 跨 浏览 器 矢量 绘图 等 。 此 外 Dojo 还 包含 一 个 工具 库 〈Util) 
模块 ， 该 模块 包含 一 个 单元 测试 框架 (Dojo Objective Harness， 简 写 为 DOH) 、 从 Dojo 源 代 
码 中 生成 文档 工具 ， 以 及 JavaScript 资源 打包 与 压缩 工具 〈Rhino) 。 这 几 个 模块 之 间 的 相互 
关系 如 图 8.1 所 示 。 
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dijit dojox 自己 的 小 部 件 


8.1 Doio 的 几 个 模块 之 间 的 关系 


Dojo 的 体系 架构 如 图 8.2 所 示 ， 从 总 体 上 来 看 ，Dojo 是 一 个 分 层 的 体系 架构 。 最 下 面 
的 一 层 是 包 系统 ,Dojo API 的 结构 与 Java 很 类 似 , 它 把 所 有 的 API 分 成 不 同 的 包 (package)， 
当 需 要 使 用 某 个 API 时 ， 只 需要 导入 这 个 API 所 在 的 包 。 包 系统 上 面 一 层 是 语言 库 ， 在 这 个 
语言 库 里 包含 一 些 语言 工具 API， 类 似 于 Java 的 util 包 。 再 上 一 层 是 环境 相关 包 ， 这 个 包 的 
功能 是 处 理 跨 浏览 器 的 问题 。 


8.2 ”Doio 的 体系 架构 


Dojo 大 部 分 代码 都 位 于 应 用 程序 支持 库 〈 在 图 8.2 中 没有 列 出 所 有 的 包 ) 。 开 发 人 员 大 
部 分 时 候 都 在 调用 这 个 层 中 的 API， 比 如 用 IO 包 可 以 进行 Ajax 调用 。 最 上 面 的 一 层 是 Dojo 
的 小 部 件 系统 ， 小 部 件 指 的 是 用 户 界面 中 的 一 个 元 素 ， 比 如 按钮 、 进 度 条 和 树 等 。Dojo 的 小 
部 件 基于 MVC 结构 。 它 的 视图 作为 一 个 Template 模板) 来 进行 存放 ， 在 Template 中 放置 
着 HTML 和 CSS 片段 ， 而 由 控制 器 来 对 该 Template 中 的 元 素 进行 操作 。 小 部 件 不 仅 支持 自 
定义 的 样式 表 ， 并 且 能 够 对 内 部 元 素 的 事件 进行 处 理 。 用 户 在 页 面 中 只 需要 加 入 简单 的 标签 
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就 可 以 使 用 。 在 这 一 层 中 存在 数 百 个 功能 强大 的 小 部 件 以 方便 用 户 使 用 ， 包 括 表格 、 树 和 菜 


单 等 。 


Dojo 提供 了 上 百 个 包 ， 这 些 包 分 别 放 在 Dojo。Dijit 和 DojoX 这 3 个 一 级 命名 空间 。 由 
于 Dojo 包 种 类 繁多 ， 表 8.1 只 列举 了 最 常用 的 一 些 包 及 其 功能 ， 以 方便 读者 有 初步 了 解 或 


供 以 后 查阅 。 
表 8-1 Dojo 常用 包 
包 名 功能 
dojo/io 不 同 的 输入 输出 传输 方式 。 包 括 Script、IFrame 等 
dojo/dnd 拖 放 功 能 的 辅助 API 
dojo/string 这 个 包 可 以 对 字符 串 进 行 修整 、 转 换 为 大 写 、 编 码 、 填 充 (pad) 等 处 理 
dojo/date 解析 日 期 格式 的 有 效 助手 
dojo/event 事件 驱动 API， 支 持 AOP 开发 ， 以 及 主题 、 队 列 的 功能 
dojo/back 用 来 撤销 用 户 操作 的 栈 管理 器 
dojo/rpe 与 后 端 服务 (例如 理解 JSON 语法 的 Web 服务 ) 进行 通信 
dojo/colors 颜色 工具 包 
dojo/data Dojo 的 统一 数据 访问 接口 ， 可 以 方便 地 读 取 XML、JSON 等 不 同 格式 的 数据 文件 
dojo/fx 基本 动画 效果 库 
dojo/regexp 正则 表达 式 处 理 函数 库 
dijit/forms 表单 控件 相关 的 小 部 件 库 
dijitlayout 页 面 布局 小 部 件 库 
dijiVpopup 这 个 包 用 于 以 弹出 窗口 方式 使 用 小 部 件 
dojox/charting 用 于 在 页 面 上 画 各 种 统计 图 表 的 工具 包 


dojox/collections 


dojox/encoding 


很 有 用 的 集合 数据 结构 (List、Query、Set、Stack、Dictionary 等 ) 
实现 加 密 功 能 的 API (Blowfish、MD5、Rijindael、SHA 等 ) 


dojox/math 数学 函数 〈 曲线、 点 、 和 矩阵 ) 

dojo/reflect 提供 反射 功能 的 函数 库 

dojox/storage 将 数据 保存 在 本 地 存储 中 〔 例 如， 在 浏览 器 中 利用 Flash 的 本 地 存储 来 实现 ) 
dojox/xml XML 解析 工具 包 


ArcGIS API for JavaScript 就 构建 于 Dojo 之 上 ， 本 书后 面 的 部 分 实践 中 也 将 使 用 Dojo 来 
结合 OpenLayers 开发 ， 因 此 在 这 里 稍微 详细 介绍 一 下 。 


8.2 OpenLayers 的 控件 


虽然 OpenLayers 并 不 提供 拖拉 控件 的 界面 来 构建 Web 应 用 程序 ， 但 是 却 提供 了 许多 控 
件 ， 只 需要 一 两 行 代码 便 可 将 这 些 控件 加 入 到 地 图 中 。 有 些 控 件 ， 例 如 地 图 平移 控件 以 及 前 
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面 内 容 介绍 的 要 素 选择 控件 ， 并 没有 一 个 可 视 的 实体 ， 而 另外 一 些 控件 ， 例 如 鹰 眼 地 图 、 图 
层 切 换 器 等 ， 具 有 可 视 实 体 。 同 时 ， 控 件 框架 是 可 扩展 的 ， 可 使 用 其 他 开发 者 编写 的 控件 ， 
当然 也 可 以 编写 自己 的 控件 。 
在 浏览 器 中 查看 “地 图 控件 实例 ” (http://dev.openlayers.org/releases/OpenLayers-2.13.1/ 
examples/ controls.html) ， 如 图 8.3 所 示 。 通 过 该 实例 可 了 解 其 中 一 些 控件 的 使 用 。 


| 


Openlayers Map Contro.. x | + 


€ devopenlayers.org/rele enlaye je cis 作恶” 四 


Map Controls Example 


Attach zooming, panning, layer switcher overview map, and permalink map controls to 
an OpenLayers window. 


图 8.3 地 图 控件 实例 


当 创 建 一 个 OpenLayers 地 图 对 象 时 ， 就 已 经 包含 了 地 图 基本 操作 控件 一 OpenLayers. 
ControlNavigation 。 如 果 希 望 改变 其 中 的 控件 ， 在 当初 始 化 地 图 对 象 时 可 传 入 希望 加 入 的 控 
件 列表 。 对 于 来 加 入 图 8.3 所 显示 的 控件 ， 可 通过 如 下 代码 来 实现 。 


map = new OpenLayers.Map('map', { 
controls: [ 


二， 


new OpenLayers.Control.Navigation(), 
new OpenLayers.Control.PanZoomBarl(), 
new OpenLayers.Control.LayerSwitcher( {'ascending’:false}), 
new OpenLayers.Control.Permalink(), 
new OpenLayers.Control.ScaleLine(), 
new OpenLayers.Control.Permalink('permalink’), 
new OpenLayers.Control.MousePosition(), 
new OpenLayers.Control.OverviewMap(), 
new OpenLayers.Control.KeyboardDefaults() 


numZoomLevels: 6 


D; 


我 们 可 以 以 上 面 的 代码 为 基础 ， 根 据 实际 再 增 减 控件 。 注 意 ， 在 上 面 没 有 列 出 的 一 个 名 
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为 OpenLayers.Control.Zoom 的 控件 ， 在 地 图 上 的 显示 如 图 8.4 所 示 ， 只 是 一 个 简单 的 “+” 与 
“-” 按 钮 ， 比 较 适合 移动 应 用 。 


P23 


a 


8.4 ”OpenLayers.Control.Zoom 控件 
可 以 通过 修改 样式 表 来 自 定义 控件 。 例 如 可 使 用 如 下 样式 代码 改变 座 眼 地 图 控件 的 外 观 。 


<style> 
.olIControlOverviewMap { 
background:#ff0000; 
width:200px; 
} 


.OlControlOverviewMapElement { 
background:#00ff00 !important; 
} 
</style> 


8.3 ”基于 属性 值 符号 化 图 层 


基于 要 素 的 属性 值 而 符号 化 的 地 图 称 为 专题 图 。 专 题 图 是 用 于 分 析 和 表现 数据 的 一 种 强 
有 力 的 方式 。 用 户 可 以 通过 使 用 专题 图 的 方式 将 数据 图 形 化 ， 使 数据 以 更 直观 的 形式 在 地 图 
上 体现 出 来 。 当 使 用 专题 演 染 在 地 图 上 显示 数据 时 ， 可 以 清楚 地 看 出 这 数据 记录 上 难以 发 现 
的 模式 和 趋势 ， 为 用 户 的 决策 提供 依据 。 专 题 图 所 表示 的 内 容 往 往 是 普通 地 图 上 没有 的 而 在 
地 面 上 看 不 到 或 无 法 直接 量 算 的 要 素 和 现象 ， 例 如 气息、 人口 分 布 、 各 种 统计 图 等 。 

制作 专题 图 是 根据 某 个 特定 专题 对 要 素 图 层 “ 演 染 ” 的 过 程 。 所 谓 的 专题 渲染 ， 就 是 以 
某 种 图 案 或 颜色 填充 来 表明 要 素 对 象 的 某 些 信息 ， 也 就 是 说 ， 这 类 泻 染 存在 着 主题 ， 经 过 这 
样 泻 染 的 地 图 就 是 专题 图 .利用 OpenLayers 可 根据 属性 数据 中 特定 的 值 来 赋 给 要 素 对 象 颜色 、 
图 案 或 符号 ， 从 而 创建 不 同 的 专题 图 。 该 专题 可 以 是 一 个 或 多 个 专题 变量 。 所 谓 专 题 变 量 就 
是 指 在 地 图 上 显示 的 数据 。 一 个 专题 变量 可 以 是 一 个 字段 或 表达 式 。 

当然 , 使 用 OpenLayers 代码 根据 要 素 属性 值 符号 化 图 层 , 并 不 是 专题 图 制作 的 唯一 途径 。 
正如 前 几 章 介绍 的 ， 也 可 以 在 服务 器 端 利用 SLD 或 CartoCSS 制作 专题 图 。 服 务 器 端 地 图 更 
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适合 于 高 级 制图 效果 。 而 且 当 图 层 中 包含 成 千 上 万 个 要 素 时 ， 在 服务 器 端 制图 具有 更 好 的 性 
能 。 


既然 存在 这 么 多 服务 器 端 制图 工具 ， 那 么 又 为 什么 使 用 OpenLayers 在 客户 端 制图 呢 ? 主 
要 原因 是 在 客户 端 制图 具有 更 大 的 灵活 性 与 交互 性 。 

(1) 灵活 性 来 自 于 数据 与 样式 的 分 离 。 对 于 同一 个 Web 服务 ， 在 客户 端 可 以 利用 同一 
数据 源 以 制作 多 种 不 同样 式 的 专题 图 ， 而 不 需要 在 服务 器 端 发 布 多 个 Web 服务 。 

(2) 交互 性 来 自 可 以 通过 客户 端 代码 动 态 重新 分 类 与 符号 化 图 层 。 例 如 ， 可 以 允许 用 户 
从 一 个 相等 的 间隔 分 类 切换 到 分 位 数 的 分 类 ， 或 调节 比例 符号 的 最 大 尺寸 ， 所 有 这 些 都 不 需 
要 与 服务 器 交互 或 增设 新 的 Web 服务 。 


8.3.1 在 OpenLayers 中 读 取 属性 值 


要 基于 属性 值 来 设置 样式 规则 ， 那 么 第 一 步 自然 就 是 获取 要 素 的 属性 值 。 那 么 在 
OpenLayers 中 如 何 获取 要 素 的 属性 值 呢 ? 

假设 有 一 个 城市 的 地 铁 线 要 素 图 层 ， 该 图 层 中 各 字段 如 图 8.5 所 示 。 现 在 有 一 个 需求 是 
用 不 同 的 颜色 分 别 绘制 不 同 的 地 铁 线 。 这 里 使 用 最 简单 的 方式 ， 图 层 中 的 COLOR 字段 包含 
了 颜色 值 。 


[| | age /1 co | 
[| 69| UNEAA 546G 队 
|®| 70|UNEAA 6C7 失 
了 3 UNEAB SEB101A 
Ey 35 UNEAB |sEB1D1A 
EY 36|UNEAB SEB1D1A 


8.5 ”一 城市 地 铁 线 要 素数 据 


在 OpenLayers 中 ,可 使 用 “${<fieldName>} ”获取 来 自 名 为 “fieldName” 字 段 的 属性 值 。 
因此 可 使 用 如 下 代码 ， 实 现 用 每 条 地 铁 线 要 素 “COLOR” 字 段 的 值 绘制 该 要 素 。 


var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", { 
projection: new OpenLayers.Projection("EPSG:900913"), 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "red_de_subte.geojson", 
format: new OpenLayers.Format.GeoJSON() 
»), 
styleMap: new OpenLayers.StyleMap({ 
'strokeWidth': 4, 
'strokeColor': '$ {COLORY' 
D 
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上 述 代 码 从 red_de_subte.geojson 文件 创建 了 一 个 矢量 图 层 。 为 样式 化 该 图 层 ， 代 码 从 
COLOR 字段 读 取 十 六 进 制 的 值 ， 然 后 将 其 赋予 样式 映射 对 象 的 strokeColor 属性 。 


8.3.2 ”独立 值 专题 图 


独立 值 专题 图 是 一 种 比较 简单 的 专题 图 。 它 使 用 不 同 的 颜色 、 符 号 或 线 型 来 显示 不 同 的 
数据 。 根 据 独 立 值 绘制 的 专题 图 有 助 于 强调 数据 的 类 型 差异 而 不 是 显示 定量 信息 (例如 给 定 
区 域内 的 商店 类 型 、 分 区 类 型 等 ) 。 因 此 ， 当 用 户 只 需要 使 用 单一 的 数据 值 来 泻 染 时 ， 可 使 
用 独立 值 专题 图 。 

例如 对 于 上 面 的 地 铁 线 要 素数 据 ， 假 设 没有 COLOR 字段 ， 那 么 则 需要 根据 每 条 线 的 名 
称 提供 一 个 唯一 的 颜色 值 。 实 现代 码 如 下 : 


var subteStyleMap = new OpenLayers.StyleMap({ 
'stroke Width': 4 


DD); 


Var lookup ={ 

"LINEA A" {strokeColor: "#46C7FA"}, 
"LINEA B": {strokeColor: "#E81D1A"}, 
"LINEA C": {strokeColor: "#4161BA"}, 
"LINEA D": {strokeColor: "#599C65"}, 
"LINEA E": {strokeColor: "#65018A"}, 
"LINEA H": {strokeColor: "#FAF739"} 

} 


subteStyleMap.addUniqueValueRules("default", "LINEASUB", lookup); 


Var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", { 
projection: new OpenLayers.Projection("EPSG:900913"), 
strategies: [new OpenLayers. Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 

url: "red_de_subte.geojson", 

format: new OpenLayers.Format.GeoJSON() 
»), 
styleMap: subteStyleMap 

D; 

在 上 述 代码 中 ， 首 先 创建 了 一 个 基本 的 样式 映射 对 象 ， 该 对 象 只 指定 了 画笔 宽度 。 然 后 
创建 了 一 个 名 为 lookup 的 非常 简单 的 JavaScript 对 象 ， 用 于 在 地 铁 线 与 期 望 的 颜色 间 建 立 映 
射 关系 。 最 重要 的 是 利用 样式 映射 对 象 的 addUniqueValueRules 方法 , 将 该 颜色 映射 与 图 层 中 
的 LINEASUB 字段 连接 起 来 。 
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8.3.3 ”等 级 符号 专题 图 


等 级 符号 专题 图 使 用 不 同 大 小 的 符号 来 表示 不 同 的 值 ， 而 且 符号 大 小 与 数据 值 成 比例 。 
等 级 符号 专题 图 对 于 阐明 定量 信息 〈 如 由 高 到 低 依次 变化 ) 很 有 用 处 。 符 号 的 大 小 与 该 要 素 
对 应 的 数值 成 比例 ， 数 值 越 大 符号 就 越 大 ， 数 值 越 小 符号 就 越 小 。 因 此 ， 等 级 符号 专题 图 最 
适合 数据 值 数据 。 

8.6 所 示 为 南美 洲 最 大 地 铁 系统 图 层 的 属性 。 


XT om COUNTRY | YEAR | LENGTHKM | STATIONS | PASSDAY UNK PHOTO 


Ww 

| 6655] -2549|5s0Paulo |Braail | 1974 四 2400000 MtPV/enwikip- | «iframe src="h-— 

1| Nm -349 santago Chae 1975 102 D750000 | httpy/ /en widp— [cirame sre="h— 
-957 105 Caracas Veneruels 1983 加 中 1330000 | ttp/ /en wilip— | <iframe srcz"h.~ 
561] 2208 Wodenero [Bl | 1 2 | e000|Mep//enwp- cmameseh 

4 538 -3603 BuenosAlres |Argentina 1 豆 机 | B4000 http://enwikip— | <iframe src=“h.— 

回 -7355 626|Medelin Colombin 1%5 EE WH] #56000 ttp/fen wikip— |<Hrame sc="h— 


图 8.6 ”南美 洲 最 大 地 铁 系统 图 层 属性 


如 果 不 做 特别 的 处 理 ， 那 么 所 有 站 点 大 都 用 一 样 大 小 的 符号 表示 ， 如 图 8.7 中 的 左 图 所 
示 。 假 设 需要 按 比 例 大 小 的 符号 ， 这 样 某 地 铁 系统 的 站 点 “STATIONS 字段 ) 越 多 ， 则 使 用 
较 大 的 地 图 符号 ， 如 图 8.7 中 的 右 图 所 示 。 


图 8.7 使 用 统一 符号 与 等 级 符号 分 别 制图 的 效果 


要 在 OpenLayers 中 实现 这 种 等 级 符号 ， 需 要 定义 一 些 数据 函数 ， 根 据 每 个 要 素 的 
STATIONS 属性 值 来 设置 符号 的 大 小 。 下 面 的 代码 将 某 要 素 的 STATIONS 值 除 以 80, 然后 乘 
以 30， 得 到 该 要 素 使 用 符号 以 像素 为 单位 的 高 与 宽 值 。 这 就 意味 着 ， 如 果 某 地 铁 系统 有 80 
个 站 点 ， 那 么 将 使 用 30 像素 宽 的 符号 ， 如 果 某 地 铁 系 统 的 站 点 少 于 80 个 ， 那 么 符号 的 宽度 
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也 将 小 于 30 个 像素 ， 多 余 80 个 站 点 的 地 铁 系统 的 符号 将 大 于 30 个 像素 (当然 ， 数 字 80 和 
30 完全 是 任意 的 ， 可 以 根据 实际 情况 进行 适当 调整 ) 。 


Var context={ 
getSize: function(feature) { 
Teturn feature.attributes.STATIONS/80* 30; 
b 
四 


Var template = { 
externalGraphic: metro.svg 
graphicWidth: '${getSize}'，// 使 用 context.getSize(feature) 
graphicHeight: '$ {getSize}'， // 使 用 context.getSize(feature) 
graphicYOffset 0 

上 


Var metroStyle = new OpenLayers.Style(template, {context: context}); 
var metroStyleMap = new OpenLayers.StyleMap( {'default': metroStyle}); 


// 定义 地 铁 系统 GeoJSON 图 层 
var metroLayer = new OpenLayers.Layer.Vector("Metro lines", { 
projection: toProjection, 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "metro.geojson", 
format: new OpenLayers.Format.GeoJSON() 


», 
styleMap: metroStyleMap 


六 

在 上 面 定义 OpenLayers 样式 时 ， 使 用 了 两 个 新 的 对 象 ， 分 别 是 模板 与 上 下 文 。 上 下 文 对 
象 包含 了 getSize 函数 ， 用 于 从 当前 要 素 中 读 取 STATIONS 属性 值 。 当 graphicWidth 与 
graphicHeight 定义 时 ， 调 用 了 该 函数 。 


8.3.4 范围 专题 图 


范围 专题 图 是 按照 设置 的 范围 对 数据 进行 分 类 与 显示 。 这 些 分 类 用 颜色 和 图 案 进 行 泻 染 。 
范围 专题 图 能 够 通过 点 、 线 和 区 域 来 说 明 数值 ， 在 反映 数值 和 地 理 区 域 的 关系 〈 如 销售 数字 、 
家 庭 收 入 ) ， 或 显示 比率 信息 如 人 口 密度 〈 人 口 除 以 面积 ) 时 是 很 有 用 的 。 

对 于 如 何 确定 范围 的 边界 值 ， 也 就 是 如 何 分 类 ， 可 使 用 相等 间隔 、 分 位 数 、 自 然 间断 点 
分 级 法 、 几 何 间 隔 或 其 他 任意 方式 。 
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例如 对 于 上 面 的 南美 洲 地 铁 系统 ， 可 以 将 包含 100 个 站 点 以 上 的 要 素 使 用 深 红色 图 标 表 
示 50~100 个 站 点 之 间 的 要 素 使 用 红色 图 标 , 而 对 于 少 于 50 个 站 点 的 要 素 , 使 用 粉红 色 图 标 ， 
如 图 8.8 所 示 。 


图 8.8 范围 专题 图 


要 在 OpenLayers 中 进行 范围 专题 制图 ， 需 要 为 每 类 定义 一 个 OpenLayers.Rule 对 象 ， 即 
规则 对 象 。 在 该 规则 对 象 中 ， 定 义 该 类 数值 的 上 限 与 下 限 。 由 于 OpenLayers 的 规则 系统 还 可 
以 用 于 其 他 多 种 查询 ， 因 此 代码 相对 比较 复杂 。 下 面 的 代码 将 南美 洲 最 大 地 铁 系统 图 层 分 成 
三 类 ， 每 类 使 用 不 同 颜色 的 SVG 符号 。 
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/ 定义 地 铁 系统 GeoJSON 图 层 
VarmetroLayer = new OpenLayers.Layer. Vector("Metro lines", { 
projection: toProjection, 
strategies: [new OpenLayers. Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: "metro.geojson", 
format: new OpenLayers.Format.GeoJSON() 
D), 
styleMap: metroStyleMap 
D; 
虽然 上 述 代码 看 起 来 很 多 ， 但 是 逻辑 还 是 非常 清楚 ， 就 是 定义 规则 并 将 规则 加 入 到 
OpenLayers 的 样式 中 。 对 于 中 间 分 类 (50~100 个 站 点 ) 规则 的 代码 相对 最 复杂 ， 因 为 需要 同 
时 定义 上 限 与 下 限 。 要 实现 该 功能 ， 需 要 将 两 个 比较 过 滤 条 件 进 行 结合 ， 形 成 一 个 逻辑 过 滤 
条 件 。 
上 述 代码 是 通过 “手动 ”来 定义 范围 与 类 ， 也 就 是 手动 添加 分 类 间隔 并 设置 适合 数据 的 
类 范围 。 如 果 要 使 用 相等 间隔 、 分 位 数 、 自 然 间 断 点 分 级 法 与 几何 间隔 等 ， 那 么 在 定义 规则 
之 前 ， 需 要 计算 以 确认 分 隔 值 。 可 以 手工 计算 ， 也 可 以 通过 JavaScript 代码 动态 计算 。 


8.3.5 ”根据 属性 限制 要 素 的 显示 


有 时 候 希 望 根据 一 些 属性 值 或 组 合 值 ， 仅 仅 显 示 数 据 集中 部 分 要 素 。 在 ESRI 的 ArcMap 
中 ， 这 称 为 定义 查询 。 例 如 以 下 情况 : 

(1) 只 希望 显示 人 口 数 超过 某 个 阔 值 的 城市 。 

(2) 许多 数据 集 (例如 道路 和 街道 数据 集 ) 包含 要 素 (类 ) 的 子 集 ， 可 能 希望 独立 于 其 
他 要 素 而 为 各 个 道路 类 定义 地 图 图 层 。 

(3) 在 另 一 种 情况 下 ,可 能 具有 大 型 企业 级 的 数据 库 ， 在 该 数据 集中 包含 覆盖 较 大 区 域 
〈 例 如 全 国 或 整个 州 ) 的 成 千 上 万 个 要 素 。 不 过 在 地 图 中 ， 可 能 只 希望 使 用 这 些 数据 的 一 个 
子 集 。 

在 前 面 学 习 的 OpenLayers.Rule 可 用 于 实现 该 功能 。 

假设 ， 对 于 南美 洲 地 铁 系 统 图 层 ， 现 需要 只 显示 COUNTRY 属性 值 为 “Brazil” 的 要 素 ， 
可 使 用 如 下 代码 来 实现 。 


varmetroStyle = new OpenLayers.Style( 
// 第 一 个 参数 是 一 基本 符号 ， 其 他 符号 在 此 基础 上 进行 扩展 
{ 
graphic Width: 25, 
graphicHeight: 25, 
graphicYOffset: 0, 


163 


一 Web GIS 原理 与 应 用 开发 


小 
/ 第 二 个 参数 是 一 组 规则 
{ 
rules: [ 
new OpenLayers.Rule({ 
filter: new OpenLayers.FilterComparison({ 
type: OpenLayers.Filter.Comparison.EQUAL _TO, 
property: "COUNTRY", 
value: "Brazil" 
), 
symbolizer: {"Point": {extemalGraphic: 'metro.svg'}} 
出 


); 


var metroStyleMap = new OpenLayers.StyleMap( {'default': metroStyle}); 


上 面 的 粗 体 代码 行 用 于 查找 COUNTRY 属性 值 为 “Brazil” 的 要 素 。 要 注意 的 是 ， 在 上 
面 的 代码 中 ， 仅 仅 根据 属性 值 进行 了 过 滤 ， 并 没有 进行 空间 查询 ， 也 就 是 说 没有 用 巴西 的 边 
界 图 形 去 获得 位 于 其 中 的 要 素 。 不 过 ，OpenLayers 也 提供 了 空间 查询 过 滤 

此 外 ， 也 可 以 根据 数值 型 的 属性 进行 过 滤 。 例 如 假设 只 希望 显示 站 点 数 在 75 个 以 上 的 地 
铁 系统 要 素 ， 可 使 用 如 下 代码 来 实现 。 


varmetroStyle = new OpenLayers.Style( 


{ 
graphic Width: 25, 
graphicHeight: 25, 
graphic YOffset: 0, 
}, 
rules: [ 
new OpenLayers.Rule({ 
filter: new OpenLayers.Filter.Comparison({ 
type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL TO, 
property: "STATIONS", 
value: 75 }), 
symbolizer: {"Point": {extemalGraphic: 'metro.sve'}} 
a 
] 
} 


); 
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Var metroStyleMap = new OpenLayers.StyleMap( {'default': metroStyle}); 


8.4 实践 13: 使 用 OpenLayers 与 Dojo 进行 专题 制图 


在 本 实践 中 ,将 综合 利用 本 章 介 绍 的 专题 制图 以 及 OpenLayers 的 控件 ， 展 现 南美 大 型 地 
铁 系 统 ， 并 利用 Dojo 这 一 强大 的 JavaScript 框架 ， 进 行 页 面 布局 。 本 实践 使 用 的 所 有 资源 位 
于 下 载 文件 的 “Codes\Walkthrough13” 文 件 夹 中 。 


8.4.1 页 面 布局 


Web 应 用 的 页 面 布局 一 直 是 令 Web 开发 者 头疼 的 一 件 事情 。 在 Web 2.0 的 时 代 ，Web 
页 面 布局 的 设计 越 来 越 多 样 化 ， 仅 仅 依靠 表格 和 CSS 控制 的 页 面 布局 已 难 满足 用 户 的 需求 。 
为 此 Dojo 提供 了 一 系列 的 布局 小 部 件 辅助 Web 开发 人 员 实现 复 杂 的 页 面 布局 。 

Dojo 中 提供 的 布局 小 部 件 可 以 分 为 如 下 3 类 ， 主 要 是 在 Dijit 中 。 

(1) 面板 : 盛 放 和 显示 大 块 的 内 容 ， 包 括 文本 、 图 片 、 图 表 以 及 其 他 小 部 件 。 这 类 的 布 
局 小 部 件 有 ContentPane、FloatingPane 与 ExpandoPane 等 ， 后 两 者 在 DojoX 中 ; 

(2) 对 章 方式 容器 : 用 以 盛 放 屏 面 类 小 部 件 ， 并 且 可 以 设置 这 些小 部 件 的 排列 方式 。 这 
类 的 布局 小 部 件 有 BorderContainer、LayoutContainer 与 SplitContainer 。 其 中 BorderContainer 
是 在 Dojol.1 中 引进 的 轻 量 级 组 件 ， 有 取代 LayoutContainer 与 SplitContainer 小 部 件 之 势 。 
目前 对 于 Dojo 不 推荐 使 用 LayoutContainer 与 SplitContainer widgets; 

(3) 堆 和 倒 容器 : 此 类 的 小 部 件 可 以 把 前 小 部 件 层 车 在 一 起 ， 而 一 次 只 显示 一 个 屏 面 。 这 
类 的 布局 小 部 件 有 AccordionContainer、TabContainer 与 StackContainer 等 。 

在 设计 页 面 布局 时 ， 首 先 应 选择 页 面 整 体 的 框架 : 上 下 两 栏 、 左 右 两 栏 、 上 中 下 三 栏 、 
左 中 右 三 栏 、 上 一 栏 下 两 栏 或 上 下 左右 中 五 栏 等 。 在 以 往 的 DIV + CSS 设计 布局 时 ， 虽然 可 
以 轻松 地 将 前 5 种 布局 实现 ， 但 如 果 要 实现 最 后 一 种 五 栏 的 布局 却 有 些 困难 。 并 且 设 计 后 的 
布局 间 的 比例 或 者 每 栏 的 大 小 都 是 固定 的 ， 当 一 栏 的 内 容 超出 栏 宽 或 高 时 ， 只 能 通过 左右 拉 
条 或 者 下 拉 条 的 拖 动 来 显示 超出 的 内 容 。 可 以 说 既 麻 烦 又 不 美观 。 

新 建 一 个 名 为 Walkthrough13 的 文件 夹 ， 在 其 中 加 入 名 为 ThematicMap.html 的 文件 。 该 
文件 的 内 容 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0， maximum-scale=1.0, 
user-scalable=0"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<title> 实 践 13: 专题 制图 </title> 
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<link rel="stylesheet" href—="http://demos.dojotoolkit.org/dijit/themes/tundra/tundra.css"> 
<style> 
html, body, #main { 
height: 100%; 
width: 100%; 
padding: 0; 
margin: 0; 
b 
#map { 
border 1px solid black; 
</style> 
<script src="http://cdnis.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.is"></script> 
<script sre="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="async: true"></script> 
<script sre="src.js"></script> 
</head> 
<body class="tundra"> 
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline’, 
gutters:false"> 
<div data-doijo-type="dijit/layout/ContentPane" data-dojo-props="region:'top" 
style="height: 10%;"> 
<h3> 南 美 大 型 地 铁 系 统 </h3> 
</div> 


<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center""> 
</div> 


<div data-doijo-type="dijit/layout/ContentPane" data-dojo-props="region:'right', splitter:'true"™" 
style="width: 50%;"> 
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters: 
false"> 
<div id="summaryLabel" data-doijo-type="dijit/layout/ContentPane" data-dojo-props= 
"region:'top', splitter'true" style="height: 30%;"> 
<p> 在 地 图 上 单 击 地 铁 系 统 ， 获 取 更 多 信息 。</p> 
</div> 
<div id="metroImage" data-dojo-type="dijit/layout/ContentPane" data-dojo-props= 
"region:'center"> 
</div> 
</div> 
</div> 


<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom" style="height: 32px;"> 
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<img src="metro legend.png"/> 
</div> 
</div> 

</body> 

</html> 

要 使 用 Dojo， 可 以 从 其 官方 网 站 http://dojotoolkit.org/download/ 下 载 源 代码 ， 也 可 以 使 用 
CDN 服务 器 部 署 的 内 容 ， 主 要 CDN 一 个 是 谷歌 ， 地 址 如 下 : 

http://ajax.googleapis.com/ajax/libs/ dojo/1.10.3/dojo/dojo.js 

在 我 国有 百度 , 地 址 是 http://libs.baidu.com/dojo/1.8.0/dojo.js。 此 外 , 还 可 以 直接 使 用 Dojo 
官网 本 书 提供 的 在 线 代 码 。 上 述 代 码 使 用 的 方式 是 后 者 。 

要 使 用 Dojo， 首 先 需要 增加 引用 其 提供 的 样式 文件 ， 代 码 如 下 : 


<link rel="stylesheet" href="http://demos.dojotoolkit.org/dijiVthemes/tundra/tundra.css"> 


Dojo 提供 了 四 组 样式 ， 分 别 是 claro、tundra、soria 以 及 nihilo， 每 种 是 一 组 定义 用 户 界 
面 的 字体 、 颜 色 与 大 小 等 设置 。 读 者 可 以 通过 如 下 地 址 来 了 解 每 组 样式 中 不 同 Dojo 小 部 件 的 
显示 情况 : 


http://archive.dojotoolkit.org/nightly/dojotoolkit/dijiv/themes/themeTester.html 
第 二 步 当然 是 要 引用 Dojo 的 JavaScript 代码 文件 ， 代 码 如 下 : 
<script sre="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="async: true"></script> 


第 三 步 就 是 利用 Dojo 的 页 面 布 局 小 部 件 进行 页 面 设计 。 一 般 是 面板 小 部 件 来 组 织 “ 原子” 
小 部 件 ， 例 如 按钮 、 文 本 框 等 ， 然 后 利用 容器 小 部 件 将 面板 放置 在 页 面 的 不 同 区 域 。 

在 Dojo 中 ， 最 重要 的 容器 容器 小 部 件 是 BorderContainer 容器 。 每 个 BorderContainer 实 
例 可 以 至 多 允许 包含 5 个 不 同 区 域 ， 上 、 下 、 左 、 右 与 中 ， 当 然 也 可 以 只 包含 其 中 几 个 区 域 。 
如 果 某 个 区 域 需 要 进一步 分 解 ， 则 可 将 BorderContainer 中 的 一 个 区 域 设 置 为 另 一 
BorderContainer 实例 。 

每 个 BorderContainer 都 有 两 种 不 同 的 方式 安排 其 子 元 素 的 位 置 ， 可 以 通过 其 “design” 
属性 来 控制 。 该 属性 的 值 可 以 是 headline 或 sidebar。 当 该 属性 设置 为 headline 时 ， 上 、 下 两 
个 区 域 优先 设置 ， 并 且 它 们 的 宽度 就 会 与 整个 BorderContainer 的 宽度 相同 ， 称 为 “上 中 下 结 
构 ”; 如 果 设 置 为 sidebar, 那么 左 、 右 两 区 域 优先 设置 , 并 且 它 们 的 高 度 与 整个 BorderContainer 
的 高 度 一 致 ， 称 为 “ 左 中 右 结构 ”， 如 图 8.9 所 示 。 


上 左 是 右 
ss 过 中 
下 下 


图 8.9 上 中 下 结构 与 左 中 右 结构 的 页 面 布局 
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BorderContainer 容器 中 的 每 个 区 域 一 般 对 应 一 个 面板 (ContentPane) ， 也 可 以 是 一 容器 。 

在 本 实践 中 ， 使 用 的 是 上 中 下 结构 ， 不 过 没有 左 部 分 ， 并 且 在 右边 部 分 也 是 一 
BorderContainer 容器 实例 ， 而 在 该 容器 实例 中 只 有 上 中 部 分 。 

从 上 述 代码 中 可 以 看 到 样式 的 定义 中 设置 了 width 和 height, 这 里 也 是 需要 特别 注意 的 地 
方 ，BorderContainer 节点 需要 设置 width 和 height (这 里 是 通过 head 中 设置 样式 代码 段 中 的 
#main 来 设置 的 ) 。 同 时 左右 两 个 子 节点 可 以 设置 宽度 ， 而 上 下 两 个 子 节点 可 以 设置 高 度 。 
对 于 中 间 区 域 的 子 节点 不 需要 设置 大 小 ， 减 去 4 个 边界 区 域 占 有 的 空间 ， 剩 下 的 就 是 中 间 区 
域 。 

如 果 用 户 不 喜欢 页 面 布局 的 尺寸 怎么 办 ? 可 以 用 可 拖 电 隔 条 将 修改 尺寸 的 权利 交 给 他 
们 。 拖 忠 隔 条 是 一 个 可 以 手动 拖 忠 改变 两 侧 区 域 尺 寸 的 边框 ， 可 以 通过 设 定 ContentPane 的 
splitter="true" 来 实现 。 这 让 依赖 于 四 周 区 域 的 尺寸 来 决定 自己 长 宽 的 中 心 区 域 也 可 拖 上 中 了 。 如 
果 想 让 用 户 的 拖 忠 有 个 限度 , 可 以 通过 指定 minSize 或 maxSize 的 属性 值 来 实现 。 尺寸 限制 了 
指定 区 域 的 长 宽 。 其 默认 最 小 值 和 最 大 值 分 别 是 0 和 Infinity， 表 示 没 有 限制 。 

BorderContainer 的 liveSizing 属性 设 定 了 面板 在 拖 忠 过 程 中 是 否 需 要 重 绘 。 设 为 true 时 可 
以 帮助 用 户 即时 地 看 到 拖 电 的 效果 。 但 如 果 ContentPane 里 有 大 量 HTML 的 话 ， 整 个 页 面 会 
变 得 非常 慢 。 此 外 ，BorderContainer 可 以 在 浏览 器 的 cookie 中 保存 拖 忠 后 的 位 置 。 只 需要 将 
persist 属性 设 定 为 true 就 可 以 实现 ， 这 样 用 户 不 必 每 次 都 更 改 边框 的 长 宽 。 


8.4.2 ”代码 设计 


为 了 保证 页 面 小 而 整洁 ， 本 实践 将 JavaScript 代码 放置 在 sre.js 文件 中 。 
(1) 创建 代码 框架 。 
在 srcjs 文件 中 ， 首 先 加 入 如 下 框架 代码 : 


require(["dojo/parser", "dijit/layoul/BorderContainer", "dijitlayout/ContentPane", "dojo/domReady"], function 

(parser) { 
parser.parse(); 

D; 

在 上 面 的 代码 中 , 调用 了 Dojo 的 全 局 函数 require。require 函数 需要 两 个 参数 ， 第 一 个 参 
数 是 依赖 项 ， 第 二 个 参数 是 一 回调 函数 。 

require 函数 的 第 一 个 参数 指定 的 是 执行 代码 所 依赖 的 ， 包 括 两 类 ， 一 类 是 真正 的 依赖 的 
类 , 另 一 类 是 插件 ， 比 如 dojo/dom、dojo/fx、dojo/domReady! 等 。 对 于 依赖 的 类 ， 如 果 不 存在 ， 
Dojo 就 会 根据 目录 结构 去 加 载 。 当 加 载 完成 之 后 ， 将 执行 回调 函数 。 插 件 是 用 来 扩展 加 载 器 
功能 的 。 插 件 的 加 载 方式 和 常规 模块 没什么 区 别 ， 只 是 在 模块 标识 符 的 结尾 使 用 了 特殊 符号 ! 
来 表明 它 的 请 求 时 插件 请 求 。 Dojo 默认 带 有 一 些 插件 , 其 中 有 4 个 最 重要 的 插件 是 : dojo/text、 
dojo/il18n、dojo/has 与 dojo/domReady。 对 于 dojo/domReady 插件 ， 意 思 是 当 DOM 解析 完毕 
以 后 再 执行 回调 函数 ， 这 样 就 可 以 确保 在 执行 任何 代码 前 DOM 可 用 。 

在 回调 函数 中 的 参数 依次 是 require 函数 的 第 一 个 参数 指定 的 依赖 类 的 别名 ， 当然 可 以 指 
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定 为 不 重复 的 变量 名 即 可 ， 但 是 为 了 代码 的 可 读 性 、 可 维护 性 以 及 一 臻 性， 最 好 是 对 于 同一 
个 模块 使 用 统一 的 别名 。 
在 回调 函数 中 , 调用 dojo/parser 功能 模块 的 parse 函数 解析 小 部 件 标签 属性 。 由 于 页 面 中 
通过 data-dojo-type 标签 属性 使 用 了 Doio 的 小 部 件 ， 但 是 这 并 不 是 标准 的 HTML， 浏 览 器 不 
能 直接 对 其 进行 解析 。 因 此 需要 在 页 面 加载 完 成 以 后 ， 对 整个 页 面 的 所 有 标签 属性 进行 解析 ， 
将 其 转换 为 浏览 器 可 以 识别 的 标记 。 因 此 需要 调用 dojo/parser 功能 模块 的 parse 函数 。 

上 述 代码 框架 首先 确保 DOM 加 载 完 成 后 ， 执 行 上 述 代码 ， 并 将 页 面 中 用 到 的 Dojo 的 小 
部 件 解析 为 浏览 器 能 直接 使 用 的 标记 。 其 他 代码 都 加 入 到 parser.parse(); 代 码 行 的 后 面 。 

(2) 创建 地 图 与 控件 。 
在 parser.parse(); 代 码 行 后 面 ， 加 入 如 下 代码 : 


var fromProjection = new OpenLayers.Projection(EPSG:4326"); // WGS84 坐标 系 
var toProjection = new OpenLayers.Projection(EPSG:900913); / Web 墨 卡 托 投影 


// 创建 地 图 与 控件 
var map = new OpenLayers.Map('map', { 
Pprojection: toProjection, 
controls: [ 
new OpenLayers.Control.Navigation(), 
new OpenLayers.Control.LayerSwitcher({ 'ascending': false }), 
new OpenLayers.Control.Attribution() 
] 
D; 


在 上 述 代码 中 ， 加 入 了 一 个 图 层 切换 器 控件 ， 通 过 该 控件 用 户 可 以 控制 图 层 的 关闭 与 显 
。 同 时 也 加 入 了 一 个 属性 控件 ， 用 于 显示 版 权 文字 。 

(3) 加 入 基础 底 图 。 

创建 地 图 与 控件 之 后 ， 加 入 如 下 代码 ， 在 地 图 中 加 入 3 个 可 选 的 切片 地 图 。 


/ 增加 可 选 基础 底 图 ， 每 次 只 能 显示 一 个 底 图 。 
/ 来 自 Mapnik 的 OpenStreetMap 
map.addLayer(new OpenLayers.Layer.OSM(CMapnik)); 


ll 


// MapQuest 切片 

map.addLayer(new OpenLayers.Layer.OSM(MapQuest Open', 
['http://otilel.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png', 
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${zH/${xM/S${y}.png', 
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${zH/${xMS${y}.png', 
‘http://otile4.mqedn.com/tiles/1.0.0/osm/${z}M/S${x}/S{y}.png'], 
{ attribution: "© <a href='http://www.openstreetmap.org/>OpenStreetMap</a> and contributors, under 

an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. Tiles Courtesy of <a 


169 


Web GIS 原理 与 应 用 开发 


href='http://www.mapquest.com/>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq logo. 
png>”)); 


/ 来自 Stamen 工作 室 的 切片 
map.addLayer(new OpenLayers.Layer.OSM('Stamen toner’, 
['http://tile.stamen.com/toner/$ {2z}/$ {x}/${y}.png'], 
由 
attribution: "© <a hre 会 http://www.openstreetmap.org/>OpenStreetMap</a> and contributors, under 
an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. Toner style by <a href= 
'http://stamen.com'>Stamen Design</a>", 
"tileOptions": { "crossOriginKeyword": null } 


D); 
虽然 同时 都 将 3 个 切片 地 图 作为 图 层 加 入 到 了 地 图 中 , 但 是 OpenLayers 知道 它们 是 基础 
底 图 ， 因 此 每 次 只 显示 一 个 。 图 层 切 换 器 控件 会 检测 到 这 些 信息 ， 并 允许 用 户 在 这 三 者 之 间 
进行 切换 ， 如 图 8.10 所 


Overlays 
Muetro lines 


Base Layer 
OStanen toner 
BlapQuest Open 
O Wapnik 


只 


网 © 0penstzeetMap contributors 


图 8.10 图 层 切 换 器 控件 
(4) 设置 专题 符号 。 
加 入 如 下 代码 ， 用 于 地 铁 系统 图 层 专 题 制图 。 


/ 设置 范围 专题 图 分 类 与 样式 规则 

Var metroStyle = new OpenLayers.Style({ 
graphicWidth: 25, 
graphicHeight: 25, 
graphicY Offset: 0, 
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rules: [ 
// 对 于 每 天 超过 200 万 乘客 要 素 的 规则 
new OpenLayers.Rule({ 
filter: new OpenLayers.Filter.Comparison({ 
type: OpenLayers.Filter.Comparison.GREATER THAN OR EQUAL TO, 
property: 'PASSDAY', 
value: 2000000 
D), 
symbolizer: { Point': { externalGraphic: 'metro high.svg } } 
D, 


// 对 于 每 天 乘客 数量 在 100~200 万 之 间 要 素 的 规则 
new OpenLayers.Rule({ 
filter: new OpenLayers.Filter.Logical({ 
type: OpenLayers.Filter.Logical.AND, 
filters: [ 
new OpenLayers.Filter.Comparison({f 
type: OpenLayers.Filter.Comparison.LESS_THAN, 
property: 'PASSDAY', 
value: 2000000 
)， 
new OpenLayers.Filter.Comparison( { 
type: OpenLayers.Filter.Comparison.GREATER_THAN_ OR _ EQUAL TO, 
property: PASSDAY"， 
value: 1000000 


»), 
symbolizer: { 'Point': { externalGraphic: 'metro medium.svg' } } 
)， 


/ 对 于 每 天 少 于 100 万 乘客 要 素 的 规则 
new OpenLayers.Rule({ 
filter: new OpenLayers.Filter.Comparison( { 
type: OpenLayers.Filter.Comparison.LESS_THAN, 
property: 'PASSDAY', 
value: 1000000 
小， 
symbolizer: { Point': { externalGraphic: "metro low.svg' } } 
D, 


/ 默认 规则 


171 


到 Web GIS 原理 与 应 用 开发 


new OpenLayers.Rule({ 
elseFilter: true, 
symbolizer: { 
extemalGraphic: "metro.svg' 
上 
D] 
D; 


(5) 设置 被 选中 要 素 使 用 的 样式 。 
加 入 如 下 代码 ， 设 置 被 选中 要 素 使 用 的 样式 。 


/ 对 于 被 选中 的 要 素 使 用 黄色 符号 

Var selectedMetroStyle = new OpenLayers.Style({ 
externalGraphic: 'metro_selected.svg’, 
graphicWidth: 25, 
graphicHeight: 25, 
graphicY Offset: 0 

D; 


var metroStyleMap = new OpenLayers.StyleMap( { 'default': metroStyle, 'select': selectedMetroStyle }); 


上 述 最 后 一 行 代码 将 默认 样式 与 被 选中 样式 进行 组 合 ， 一 并 加 入 到 了 样式 映射 对 象 中 。 
(6) 矢量 图 层 创建 。 
加 入 如 下 代码 ， 创 建 矢量 图 层 ， 并 将 其 加 入 到 地 图 中 。 


/ 定义 地 铁 系 统 GeoJSON 图 层 
var metroLayer = new OpenLayers.Layer.Vector(Metro lines', { 
projection: toProjection 
Strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol.HTTP({ 
url: 'metro.geojson’, 
format: new OpenLayers.Format.GeoJSON() 
D), 
styleMap: metroStyle Map 
D; 


/ 将 地 铁 系统 图 层 加 入 到 地 图 中 ， 并 设置 地 图 中 心 点 
map.addLayer(metroLayer); 
map.setCenter(new OpenLayers.LonLat(-60, -25).transform(fromProjection, toProjection), 3); 


(7) 加 入 选择 控件 。 
要 实现 要 素 选择 功能 ， 首 先 需要 加 入 选择 控件 ， 用 于 监听 要 素 选 择 与 取消 选择 事件 。 代 
码 如 下 : 
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/ 监听 要 素 选择 与 取消 选择 事件 

Var selectControl = new OpenLayers.Control.SelectFeature([metroLayer], { 
onSelect: onFeatureSelect 
onUnselect onFeatureUnselect 

); 


map.addControl(selectControl); 
selectControl.activate(); 


如 果 希 望 当 用 户 单 击 某 要 素 时 ， 改 变 符号 或 执行 其 他 操作 ， 可 使 用 选择 控件 。 这 样 便 可 


以 不 需要 编写 代码 去 监听 点 击 事件 或 切换 符号 了 ， 这 些 工作 都 由 选择 控件 来 完成 。 需 要 编写 
的 代码 是 定义 两 个 函数 ， 分 别 用 于 当选 择 与 取消 选择 时 ， 还 需要 的 进一步 功能 。 上 面 的 代码 
指示 ， 当 要 素 被 选择 时 ， 调 用 onFeatureSelect 函数 ;取消 选择 时 ， 将 调用 onFeatureUnselect 
函数 。 


(8) 处 理 要 素 选择 事件 。 
加 入 如 下 代码 ， 用 于 处 理 要 素 选择 事件 。 


/ 处 理 要 素 选择 事件 ， 获 取 要 素 属性 ， 构 建 HTML 
function onFeatureSelect(feature) { 
/ 获取 要 素 属性 ， 对 于 没有 的 属性 使 用 默认 值 
var featureName = feature.attributes.CITY || ' 无 名 要 素 '; 
var country = feature.attributes.COUNTRY || "(不 明确 ); 
var year = feature.attributes.YEAR || "(不 明确 )'; 
var passengers = feature.attributes.PASSDAY | "(不 明确 )'; 
var stations = feature.attributes.STATIONS || (不 明确 ); 
var length = feature.attributes.LENGTHKM || "(不 明确 ); 
yar link = feature.attributes.LINK || ‘http://www.wikipedia.org’; 


1/ 使 用 属性 值 ， 构 建 HTML， 并 加 入 到 summaryLabel 中 

var photoHtml = feature.attributes.PHOTO || '<P>Photo not available</P>'; 

var titleHtml = '<p style="font-size:18px"><b>' + featureName + '</b></p>'; 

Var descripHtml = '<p>' + country + ' 国 家 ' + featureName + ' 地 铁 系统 ，' + year + 年 投入 运行 ， 当 前 每 


天 服务 于 ' + passengers + ' 名 乘客 。 该 网 络 系统 包含 '+ stations + ' 站 点 ， 总 里 程 超 过 ' + length +' 公 里 。</p>'; 


var readmoreHtml = '<p><a hre 伟 "+ link+ "> 更 多 信息 .…</a></p>'; 
document.getElementById(summaryLabel).innerHTML = titleHtml + descripHtml + readmoreHtml; 
documentgetElementById(metroImage).innerHTML = photoHtml; 
| 
(9) 处 理 要 素 取消 选择 事件 。 
加 入 如 下 代码 ， 用 于 处 理 要 素 取消 选择 事件 。 


/ 处 理 要 素 取消 选择 事件 
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function onFeatureUnselect(feature) { 
1/ 将 summaryLabel 中 的 内 容 设置 为 默认 状 体 


document.getElementById('summaryLabel').innerHTML = '<p> 在 地 图 上 单 击 地 铁 系统 ， 获 取 更 多 信 
息 。</p>'; 


document.getElementById(metroImage).innerHTML =" 


} 

(10) 运行 并 测试 程序 。 

用 Firefox 等 浏览 器 直接 打开 ThematicMap.html 文件 , 然后 在 地 图 中 选择 某 一 要 素 , 可 显 
示 该 要 素 的 详细 信息 ， 如 图 8.11 所 示 。 
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图 8.11 程序 运行 效果 
8.5 习 题 


(1) Dojo 的 dojox/geo/openlayers 是 基于 OpenLayers 的 地 图 模块 ， 阅 读 如 下 地 址 的 两 篇 
文章 ， 熟 悉 该 模块 的 使 用 。 


http:/dojotoolkit.org/reference-guide/1.10/dojox/geo/openlayers.html 
http://acuriousanimal.com/blog/2012/01/23/dojo-openlayers-new-challenges/ 


(2) 利用 下 载 文件 “Codes\Assignment08” 文 件 夹 中 internet_users_2005.json(2005 年 每 
| 


家 互联 网 用 户 量 ) 的 数据 ， 根 据 value 字段 的 值 ， 使 用 OpenLayers 制作 图 8.12 所 示 的 范 
围 专题 图 。 参 考 代码 见 同 文件 夹 中 的 Choropleth.html 文件 。 
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范围 专题 图 x\+ 
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Brazil: 17.2 


图 8.12 使 用 OpenLayers 制作 范围 专题 图 


(3) 利用 下 载 文件 “Codes\Assignment08” 文 件 夹 中 population_2005.json(2005 年 各 国 
人 口 数量 ) 的 数据 ， 根 据 value 字段 的 值 ， 使 用 OpenLayers 制作 图 8.13 所 示 的 等 级 符号 专题 
图 。 参 考 代码 见 同一 文件 夹 中 的 ProportionalSymbol.html 文件 。 


8.13 ”使 用 OpenLayers 制作 等 级 符号 专题 图 
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从 本 章 可 以 学 习 到 : 


必 了 解 WFS 
事务 性 WFS 与 基于 Web 的 数据 编辑 
加 基于 Web 的 空间 数据 编辑 功能 实现 


第 9 章 Web 要 素 服务 
en 


在 第 7 章 介绍 了 如 何在 Web 浏览 器 或 客户 端 中 绘制 矢量 数据 ， 主 要 介绍 了 KML 与 
GeoJSON 格式 的 数据 。 不 过 , 还 可 以 根据 请 求 从 Web 服务 中 将 数据 发 送 到 客户 端 。 只 要 服务 
器 与 客户 端 都 遵循 同一 规范 ， 那 么 数据 可 以 是 任意 格式 的 。 为 了 规范 通过 Web 服务 发 送 矢量 
数据 的 过 程 ，OGC 制定 了 Web 要 素 服务 (WFS) 规范 。 

本 章 将 介绍 WFS 及 其 服务 的 发 布 、 访 问 与 应 用 ， 并 介绍 如 何 通 过 该 服务 实现 基于 Web 
的 空间 数据 编辑 。 


9.1 WFS 


Web GIS 服务 器 除了 能 返回 一 张 地 图 图 像 之 外 ， 也 可 以 返回 绘制 该 地 图 图 像 所 使 用 的 真 
实地 理 数据 。 用 户 利用 这 些 数 据 可 以 创建 他 们 自己 的 地 图 与 应 用 、 数 据 格式 转换 以 及 底层 的 
地 理 操作 。 这 类 返回 地 理 要 素数 据 的 规范 称 为 Web 要 素 服务 。 图 9.1 显示 了 WFS 是 如 何 将 一 
个 要 素 请 求 转换 为 响应 的 。 


Web 要 素 服务 
图 9.1 Web 要 素 服务 对 要 素 请 求 的 响应 
那么 WMS 与 WFS 有 什么 区 别 呢 ? WMS 是 由 服务 器 将 一 地 图 图 像 发 送 给 客户 端 ， 而 
WEFS 是 服务 器 将 矢量 数据 发 送 给 客户 端 ， 也 就 是 在 使 用 WMS 时 地 图 由 服务 器 绘制 ， 在 使 用 
WFS 时 地 图 由 客户 端 绘制 。 


9.1.1 WFS 请 求 与 响应 的 格式 


与 WMS 类 似 ，WFS 支持 直接 在 URL 地 址 中 加 参数 方式 的 几 个 操作 ， 这 些 操作 包括 
GetCapabilities、DescribeFeatureType 与 GetFeature。 其 中 GetFeature 操作 用 于 获取 要 素数 据 。 

下 面 是 在 WFS 中 GetFeatures 操作 的 例子 ， 该 请 求 用 于 获取 美国 科罗拉多 州 要 素数 据 : 

http://suite.opengeo.org/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&type 
name=usa:states&featureid=states.23 


在 上 述 请 求 中 ，service=wfs 表示 使 用 WFS 服务 ，version=1.1.0 表示 使 用 1.1.0 版 本 ， 
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request=GetFeature 表示 执行 GetFeature 操作 ，typename=usa:states 表示 针对 的 是 GeoServer 服 

务 器 中 USA 工作 区 的 名 为 states 的 图 层 ，featureid=states.23 表示 需要 获取 的 要 素 的 ID 为 23。 
WEFS 使 用 地 理 标 记 语 言 (Geography Markup Language，GML) 返回 数据 。GML 可 以 同 

时 包含 图 形 与 属性 信息 。 由 于 GML 是 基于 XML 的 ， 因 此 比 GeoJSON 要 元 长 得 多 。 
仔细 查看 上 述 请 求 返回 的 结果 ， 可 在 其 中 找到 以 下 图 形 数据 : 


<gml:posList>37.48468400000007 -109.04348799999995 38.164690000000064 -109.04176199999989 
38.27548899999999 -109.06006199999996 41.0006590000001 -109.05007599999999 41.00235900000007 
-102.051717 36.993015999999955 -102.04208899999992 36.99908400000004 -109.0452229999999 
37.48468400000007 -109.04348799999995</gml:posList> 

同时 也 可 看 到 如 下 所 示 的 属性 数据 : 

<usa:NAME10>Colorado</usa:NAME10> 

<usa:ALAND10>2.68431246426E11</usa: ALAND10> 

<usa:AWATER10>1.170101258E9</usa:AWATER10> 

<usa:DP0010001>5029196</usa:DP0010001> 

<usa:DP0010020>2520662</usa:DP0010020> 

<usa:DP0010039>2508534</usa:DP0010039> 


上 述 类 型 的 请 求 同 样 可 用 于 使 用 GeoServer 发 布 的 服务 。 例 如 对 于 前 面 内 容 中 发 布 的 费 
城 社区 图 层 ， 可 使 用 如 下 请 求 获取 其 中 一 个 社区 的 空间 数据 : 

http://localhost:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typena 
me=webgis:Neighborhoods&featureid=Neighborhoods.12 


主要 响应 内 容 如 下 : 


<wfs:FeatureCollection numberOfFeatures="1" timeStamp="2014-03-03T15:07:31.8222Z" xsi:schemaLocation 

="http://localhost:8080/geoserver/webgis 
http://localhost:8080/geoserver/wfs?service=WFS&version=1.1.0&request=DescribeFeatureType&type Name=webg 

is%3ANeighborhoods http://www.opengis.net/wfs http://localhost:8080/geoserver/schemas/wfs/1.1.0/wfs.xsd"> 
<gml:feature Members> 
<webgis:Neighborhoods gml:id="Neighborhoods.12"> 
<webgis:the geom> 
<gml:MultiSurface srsDimension="2" srsName="urn:x-ogc:def:crs:EPSG:3857"> 
<gml:surfaceMember> 
<gml:Polygon srsDimension="2"> 
<gml:exterior> 
<gml:LinearRing srsDimension="2"> 

<gml:posList>-8363968.786751106 4869301.13520122 -8363706.077778376 
4871057.31164155 -8363880.846283749 4871132.918517317 -8363697.377540309 4872031.511981935 
-8363780.660729433 4872179.806916264 -8363847.448310932 4872208.890548547 -8363802.926044645 
4872557.878939522 -8363802.44449278 4872626.491915396 -8363025.915000884 4872530.247301338 
-8361543.138729884 4872310.6731403675 -8361453.88028348 4872223.294811407 -8361493.045963939 
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4872015.489274301 -8361627.94355705 4871826.7318475135 -8361690.687270048 4871673.398417745 
-8361627.94355705 4871403.748827802 -8361286.901117077 4870791.777211798 -8361326.368936536 
4870458.7113405885 -8361498.408149585 4869986.8871721085 -8361555.111808623 4869831.380121785 
-8362695.297708079 4869623.850560427 -8363168.406381819 4869548.2551895585 -8363968.786751106 
4869301.13520122</gml:posList> 
</gml:LinearRing> 
</gml:exterior> 
</gml:Polygon> 
</gml:surface Member> 
</gml:MultiSurface> 
</webgis:the_geom> 
<webgis:STATE>PA</webgis:STATE> 
<webgis:COUNTY>Philadelphia</webgis:COUNTY> 
<webgis:CITY>Philadelphia</webgis:CITY> 
<webgis:NAME>Olney</webgis:NAME> 
<webgis:REGIONID>214146.0</webgis:REGIONID> 
</webgis:Neighborhoods> 
</gml:featureMembers> 
</wfs:FeatureCollection> 


9.1.2 ”WFS 服务 器 与 客户 端 


虽然 WFS 的 请 求 与 响应 的 语法 初 看 起 来 有 些 吓人 ,不 过 在 实际 使 用 过 程 中 ,并 不 需要 我 
们 手工 来 编写 。GIS 软件 中 通常 都 支持 查看 与 发 布 WFS 服务 。 

正如 上 面 所 演示 的 ，GeoServer 可 将 图 层 发 布 为 WFS 服务 ， 而 且 这 是 默认 设置 ， 并 不 需 
要 用 户 额 外 的 配置 。 其 他 开源 GIW 服务 器 软件 ， 例 如 MapServer 与 Degree 等 也 都 支持 创建 
WFS 服务 。 

在 商业 软件 领域 ，ESRI 的 ArcGIS Server 也 可 用 于 发 布 WFS 服务 。 不 过 ，ESRI 开发 了 
其 自身 基于 REST 的 “要 素 服务 ” 用 于 完成 WFS 相同 功能 ,ESRI 的 ArcGIS API for JavaScript 
及 其 编辑 控件 使 用 的 是 其 自身 的 要 素 服务 ， 而 不 是 标准 的 WFS。 

对 于 大 多 数 的 Web 地 图 API， 通 常 将 WFS 作为 一 图 层 。 例 如 ， 在 OpenLayers 中 ， 要 加 
入 一 个 WFS 服务 ， 与 前 面 内 容 介绍 的 加 入 KML 与 GeoJSON 数据 一 样 ， 使 用 
OpenLayers.Layer.Vector 即 可 ， 只 是 协议 不 同 。 对 于 要 素 的 样式 与 符号 , 与 前 面 内 容 介 绍 的 也 
完全 一 样 。 具 体 如 下 : 


/ 定义 一 样 是 

styleMap = new OpenLayers.StyleMap({ 
StrokeColor "black", 
strokeWidth: 2, 
strokeOpacity: 0.5, 
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fillOpacity: 0.2 


D; 
/ 创建 WFS 图 层 
Var wfs = new OpenLayers.Layer. Vector("States", { 
strategies: [new OpenLayers.Strategy. BBOX()], 
protocol: new OpenLayers.Protocol.WFS({ 
Version: "1.0.0", 
srsName: "EPSG:4326", 
url: "http://demo.opengeo.org/geoserver/wfs", 
featureType: "states", 
featureNS: "http://www.openplans.org/topp" 
D), 
styleMap: styleMap 
D; 
map.addLayer(wfs); 


不 过 Leaflet 以 及 许多 其 他 轻 量 级 的 开源 Web 地 图 API 中 ， 并 不 原生 支持 WFS。 
客户 端 GIS 软件 一 般 都 能 查看 WFS 服务 。 


9.2 事务 性 WFS 与 基于 Web 的 数据 编辑 


WFS 规范 同时 定义 了 要 素 编辑 的 规则 ， 这 就 为 基于 Web 进行 矢量 数据 编辑 打开 了 大 门 。 
通过 WFS 服务 对 源 数据 库 中 的 数据 进行 更 改称 为 事务 性 WFS 或 WFS-T。 

- 旦 启用 了 事务 功能 ，WFS 客户 端 便 可 使 用 事务 性 WFS 方法 对 地 理 数 据 库 中 的 数据 进 
行 更 改 。 下 面 是 如 何 应 用 更 改 的 示例 : 

(1) WFS 客户 端 连接 到 启用 事务 的 已 发 布 WFS 服务 。 

(2) 在 服务 器 上 锁定 所 编辑 的 要 素 和 行 〈 可 使 用 WFS 的 GetFeatureWithLock 请 求 执行 
此 操作 ) 。 

(3) 在 WFS 客户 端 上 使 用 WFS 编辑 器 执行 编辑 。 

(4) 随后 在 服务 器 上 应 用 编辑 (可 使 用 事务 性 WFS 方法 执行 此 操作 ) 。 

当 提交 编辑 内 容 后 , 将 解除 锁定 并 且 要 素 可 由 其 他 WFS 编辑 器 进行 编辑 。 如 果 时 间 超 时 ， 
锁定 同样 也 可 解除 。 可 以 通过 使 用 GetFeatureWithLock 方法 指定 一 个 超时 分 钟 数 来 调整 锁定 
时 间 。 

插入 事务 不 要 求 锁定 要 素 。 因 为 现 有 要 素 不 能 被 修改 〈 更 新 或 删除 ) ， 所 以 不 必 调 用 
GetFeatureWithLock。 任 何 要 求 更 新 或 删除 的 事务 请 求 必 须 有 锁定 ID 。 
事务 性 WFS 可 用 来 增加 、 删 除 或 修改 加 载 的 要 素 ， 最 重要 的 是 能 将 该 操作 提交 并 保存 到 
数据 源 中 。 因 此 ， 要 修改 的 数据 源 必须 存储 在 PostgreSQL 这 类 空间 数据 库 中 ， 而 不 能 是 
Shapefile 等 文件 中 。 
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9.3 ”实践 14: 基于 Web 的 空间 数据 编辑 功能 实现 


下 面 将 介绍 如 何 使 用 GeoServer 发 布 PostgreSQL 中 的 数据 , 以 及 如 何 通 过 OpenLayers 实 
现 基于 Web 的 数据 编辑 。 


9.3.1 发 布 服务 


(1) 准备 数据 。 
正如 前 面 介绍 的 ， 要 基于 Web 编辑 矢量 数据 ， 那 么 其 源 数据 应 位 于 数据 库 中 。 

本 实践 使 用 的 是 “3.6 实践 5: PostGIS 的 安装 与 初步 使 用 ”中 导入 到 PostgreSQL 数据 库 
中 的 Vancouver 数据 图 层 。 所 以 对 于 没有 完成 该 实践 的 读者 ， 请 按照 介绍 的 步骤 将 数据 导入 
到 PostgreSQL 数据 库 中 。 

(2) 添加 新 的 数据 存储 。 
启动 GeoServer， 登 录 进 入 GeoServer 的 Web 管理 页 面 。 在 页 面 的 左边 单 击 “ 数 据 ” 中 的 
“数据 存储 ”， 然 后 单 击 “ 添 加 新 的 数据 存储 ”， 进 入 “新 建 数据 源 ” 页 面 。 在 该 页 面 中 选 

择 “PostGIS”， 进 入 “新 建 矢 量 数据 源 ”页 面 。 

在 “新 建 矢 量 数据 源 ” 页 面 中 ， 将 工作 区 选择 为 webgis， 将 数据 源 名 称 设置 为 

“PostGIS_Dataset”。 在 数据 库 连 接 参数 部 分 ， 保 留 host 与 port 的 默认 设置 (如 果 不 是 默认 
安装 , 则 需要 更 改 ), 将 database 设置 为 Vancouver,user 设置 为 postgres,passwd 设置 为 postgres 
超级 用 户 对 于 的 密码 (如 果 读 者 是 完全 按照 本 书 的 设置 ， 那么 密码 也 是 postgres) 。 其 他 都 使 
用 默认 设置 。 最 后 单 击 页 面 底部 的 “保存 ”按钮 。 
(3) 新 建 PostGIS 图 层 。 

当 在 “新 建 矢量 数据 源 ” 页 面 中 单 击 “ 保 存 ” 按 钮 之 后 ， 将 进入 “新 建 图 层 ”页 面 。 在 
该 页 面 中 列 出 了 PostGIS_Dataset 数据 存储 对 应 的 Vancouver 数据 库 中 的 所 有 图 层 ， 其 中 有 一 
个 为 vancouver 的 图 层 。 单 击 “ 发 布 ”， 进 入 “编辑 图 层 ” 页 面 。 

与 将 Shapefile 文件 发 布 为 服务 不 同 的 是 ， 在 发 布 PostGIS 数据 库 中 的 图 层 时 ， 默 认 已 经 
设置 好 了 坐标 参照 系统 ， 我 们 只 需 单 击 “ 从 数据 中 计算 ”与 “Compute from native bounds” 计 
算 并 自动 填充 边框 坐标 即 可 。 最 后 单 击 页 面 底 部 的 “保存 ”按钮 。 保 存 以 后 ， 便 可 在 图 层 列 
表 中 列 出 图 9.2 所 示 的 新 图 层 。 


类 型 工作 区 存 竺 图 层 名 称 启用 Native SRS 
加 webgis phiadelphia cty_limits v EPSG:3857 
. webgis phiadelphia FarmersMarkets 塘 EPSG:3857 
加 webgis philadelphia Neighborhoods 哆 EPSG:3857 
ai webgis phiadelphia roads M4 EP56:3857 


图 9.2 将 数据 库 中 的 数据 发 布 为 图 层 
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9.3.2 ”基于 Web 编辑 功能 开发 


(1) 页 面 设计 。 


新 建 一 个 名 为 Walkthrough14 的 文件 夹 ， 在 其 中 加 入 名 为 WebEditor.html 的 文件 。 该 文 


件 的 内 容 如 下 ; 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<meta ”name="viewport" content="width=device-width, 


user-scalable=0"> 


<meta name="apple-mobile-web-app-capable" content="yes"> 


<title> 实 践 14: 数据 编辑 </title> 


<style> 

.CustomEditingToolbar { 
float: right; 
Tight: Opx; 
height: 30px; 
width: 200px; 

1 

.customEditingToolbar div { 
float: right; 
margin: Spx; 
width: 24px; 
height: 24px; 

bp 


.OIControlNavigationItemActive { 


background-image: url("img/editing_tool_bar.png"); 


background-repeat: no-repeat; 
background-position: -103px -23px; 
» 


.OIControlNavigationItemInactive { 


background-image: url("img/editing_tool_bar.png"); 


background-repeat: no-repeat; 
background-position: -103px -Opx; 
b 
.0lControlDrawFeaturePolygonltemInactive { 


background-image: url("img/editing tool bar.png"); 


background-repeat: no-repeat; 
background-position: -26px Opx; 
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h 

.OIControlDrawFeaturePolygonItemActive { 
background-image: url("img/editing_ tool bar.png"); 
background-repeat: no-repeat; 
background-position: -26px -23px; 

b 

:olIControlModifyFeatureItemActive { 
background-image: url("img/move_feature_on.png"); 
background-repeat: no-repeat; 
background-position: Opx 1px; 

} 

.OIControlModifyFeatureItemInactive { 
background-image: url("img/move feature off.png"); 
background-repeat: no-repeat; 
background-position: Opx 1px; 

b 

.0lControlDeleteFeatureltem Active { 
background-image: url("img/remove_point_on.png"); 
background-repeat: no-repeat; 
background-position: Opx 1px; 

b 

.olControlDeleteFeatureItemInactive { 
background-image: url("img/remove_point_off.png"); 
background-repeat: no-repeat; 
background-position: Opx lpx; 

</style> 
<script sre="http://cdnis.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.is"> 
</script> 
<script></script> 
</head> 
<body onload="init()"> 
<div id="map" style="width:500px; height:500px;"></div> 
<div id="coordinates"></div> 
<div id="nodelist"></div> 
</body> 
</html> 


在 页 面 的 样式 中 用 到 了 img 文件 夹 中 的 editing_tool bar.png 与 move_feature_ on.png 等 5 
个 图 片 ， 这 些 图 片 可 从 下 载 文件 “Codes\Walkthroughl4\img” 文 件 夹 中 找到 。 
(2) 初始 化 地 图 并 加 入 WFS 图 层 。 
在 <script> 与 </script> 之 间 加 入 如 下 JavaScript 代码 : 
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function initO) { 
Var WGS84 = new OpenLayers.Projection("EPSG:4326"); 
Var WGS84 google mercator = new OpenLayers.Projection("EPSG:900913"); 


var map = new OpenLayers.Map("map", { 


controls: [ 


]， 


new OpenLayers.Control.Navigation(), 
new OpenLayers.Control.PanZoom(), 
new OpenLayers.Control.LayerSwitcher(), 
new OpenLayers.Control.MousePosition({ 
div: document.getElementByld("coordinates") 


D 


displayProjection: WGS84 


D); 


Var mapextent = new OpenLayers.Bounds(-123.17341, 49.24343, 


(WGS84, WGS84 google mercator); 


/ 底 图 


var openstreetmap = new OpenLayers.Layer.OSM(); 


// 设置 保存 策略 
Var saveStrategy = new OpenLayers.Strategy.Save(); 


saveStrategy.events.register("success", ", showSuccessMsg); 


saveStrategy.events.register("failure", ", showFailureMsg); 


// WFS-T 可 编辑 图 层 

Var wfs layer = new OpenLayers.Layer.Vector("Editable Features", { 
strategies: [new OpenLayers.Strategy. BBOX(), saveStrategy], 
protocol: new OpenLayers.Protocol.WFS({ 


webgis:vancouver" 


184 


version: "1.1.0", 

/ 数据 加 载 的 URL 路 径 

url: "http://localhost:8080/geoserver/wfs", 

/ 工作 区 关联 的 命名 空间 URI 

featureNS: "http://localhost:8080/geoserver/webgis", 
maxExtent: mapextent, 

/ 图 层 名 称 

featureType: "vancouver", 


/ 空间 坐标 所 在 字段 名 


geometryName: "geom", 


-123.06183，49.29899).transform 


Schema: "http://localhost:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&;typename= 
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D) 
D); 
map.addLayers([openstreetmap, wfs_layer]); 
map.zoomToExtent(mapextent); 
} 
function showMsg(szMessage) { 
document.getElementById("nodelist").innerHTML = szMessage; 
SetTimeout("document.getElementById(nodelist).innerHTML ="", 2000); 
} 
function showSuccessMsg() { 
showMsg(" 事 务 成 功 执行 "); 
相 
function showFailureMsg() { 


showMsg(" 在 执行 事务 过 程 中 出 现 错 误 "); 
四 
地 图 初始 化 代码 与 前 面 所 有 示例 基本 都 一 致 , 在 添加 WFS 图 层 时 , 为 了 实现 编辑 的 保存 ， 
在 设置 策略 时 增加 了 一 个 保存 策略 。 
在 设置 WFS 协议 时 ， 其 url 参数 指定 了 数据 加 载 URL 路 径 ， 在 程序 运行 时 OpenLayers 
向 该 地 址 发 出 POST 请 求 。 使 用 Firebug 或 其 他 开发 者 工具 ， 可 以 查看 这 些 请 求 。 例 如 图 9.3 
就 是 使 用 Firebug 查看 到 的 加 载 WFS 数据 时 OpenLayers 发 送 的 POST 请 求 。 


BS POST http://localhost:8080/geoserver/wfs 200 OK 1275 OpenLayers- js (第 553 
头 信息 Post 响应 XML 


Coge 


ogc-BB0X> 


图 9.3 利用 Firebug 查看 OpenLayers 获取 WFS 数据 时 发 送 的 请 求 
在 设置 WFS 协议 时 ， 其 featureNS 参数 指定 的 是 要 素 图 层 所 在 工作 区 对 应 的 命名 空间 
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URI。 该 URI 是 指 创建 工作 区 时 比较 随意 设置 的 ,因此 没有 一 定之 规 。 例 如 GeoServer 自 带 的 
cite 工作 区 ， 其 关联 的 命名 空间 URI 为 “http://www.opengeospatial.net/cite”， 而 与 sde 工作 
区 关联 的 是 “http://geoserver.sf.net”。 因 此 ， 在 开发 时 需要 仔细 确认 。 可 以 在 GeoServer 的 
Web 管理 页 面 ， 查 看 并 重新 设置 某 个 工作 区 对 应 的 命名 空间 URI。 例 如 图 9.4 显示 的 是 我 们 
增加 的 webgis 工作 区 相关 设置 。 


编辑 工作 


编辑 现 有 的 工作 区 


[xl 


http://localhost:8080/ge0server/webgis 


命名 空间 UR 二 这 个 工作 区 关联 


默认 工作 区 


9.4 查看 某 个 工作 区 关联 的 命名 空间 URI 


在 设置 WFS 协议 时 ， 其 featureType 参数 指定 的 是 图 层 名 称 ， 而 schema 中 的 typename 
参数 应 同时 包含 工作 区 名 称 与 图 层 名 称 。 此 外 ，geometryName 参数 指定 的 是 包含 空间 坐标 信 
息 的 字段 名 称 。 该 字段 名 称 对 于 不 同 的 图 层 可 能 会 存在 差异 。 可 以 在 GeoServer 的 Web 管理 
页 面 的 图 层 列表 中 选择 某 图 层 ， 进 入 “编辑 图 层 ” 页 面 ， 在 “数据 ”选项 卡 中 的 底部 可 以 查 
看 空间 坐标 对 应 的 字段 名 称 .例如 图 9.5 显示 的 是 我 们 使 用 的 vancouver 图 层 中 所 包含 的 字段 ， 
通过 分 析 可 以 得 知 空间 坐标 对 应 的 字段 名 称 是 “geom”。 


要 素 类 型 

属性 类 型 Millable 。 Min/Max Occurences 
仙 Double true 0/1 

geom Mulkipoygon true 0/1 

重新 载 入 要 素 类 型 鳃 … 

保存 取 泪 


图 9.5 确定 包含 空间 坐标 字段 的 名 称 
(3) 增加 编辑 工具 条 。 
在 init0 函 数 中 ， 再 加 入 如 下 代码 : 


/ 增加 自 定义 编辑 工具 条 
varpanel = new OpenLayers.Control.Panel({ 
"displayClass': 'customEditingToolbar' 
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(4) 实现 删除 要 素 按钮 控件 。 

平移 地 图 、 绘 制 多 边 形 以 及 修改 多 边 形 ，OpenLayers 都 提供 了 对 应 的 控件 。 对 于 保存 修 
改 结果 ， 也 只 需要 使 用 一 个 按钮 控件 ， 并 在 其 中 调用 保存 策略 对 象 的 保存 函数 ， 便 可 实现 保 
存 功能 。 而 对 于 删除 要 素 ， 则 需要 编写 相对 多 一 点 的 代码 。 需 要 我 们 从 OpenLayers 的 控件 基 
础 类 来 扩展 。 在 showFailureMsg() 函 数 的 下 面 ， 加 入 如 下 代码 ， 用 于 实现 删除 要 素 按钮 控件 。 


/ 设置 删除 要 素 工具 
Var DeleteFeature = OpenLayers.Class(OpenLayers.Control, { 
initialize: function (layer, options) { 
OpenLayers.Control.prototype.initialize.apply(this, [options]); 
this.layer = layer; 
this.handler = new OpenLayers.Handler.Feature( 
this, layer, { click: this.clickFeature } 
); 
}， 
clickFeature: function (feature) { 
/ 如 果 要 素 不 包含 fid 
if (feature.fid 一 undefined) { 
this.layer.destroyFeatures([feature]); 
}else{ 
feature.state = OpenLayers.State. DELETE; 
this.layer.events.triggerEvent("afterfeaturemodified", { 
feature: feature 
D; 
feature.renderIntent = "select"; 
this.layer.drawFeature(feature); 
}， 
setMap: function (map) { 
this.handler.setMap(map); 
OpenLayers.Control.prototype.setMap.apply(this, arguments); 
四 
CLASS_NAME: "OpenLayers.Control.DeleteFeature" 
D; 
(5) 运行 与 调试 。 
月 Firefox 等 浏览 器 直接 打开 WebEditor.html 文件 ， 然 后 在 地 图 中 便 可 增加 、 修 改 与 删除 
多 边 形 要 素 ， 单 击 “ 保 存 ” 按 钮 可 将 编辑 结果 提交 到 服务 器 ， 更 改 数据 库 中 的 数据 ， 运 行 效 
果 如 图 9.6 所 示 。 程 序 代码 位 于 下 载 文 件 的 “Codes\Walkthrough14” 文 件 夹 中 。 
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a | 
实 路 14 : 数据 北 乞 x VP 


€ @deyWallthroughi4WebEditorhiml 了 C| 曲 有 -人 9 三 


123. 05926，49. 29451 


图 9.6 程序 运行 效果 


如 果 程序 在 运行 中 没有 成 功 加 载 vancouver 图 层 ， 可 用 Firebug 来 查看 原因 。 如 果 出 现 类 
似 图 9.7 所 示 的 异常 响应 结果 , 那么 表示 在 设置 WFS 协议 时 工作 区 关联 的 命名 空间 URI 或 图 
层 名 称 设置 出 现 了 错误 。 


日 POST http://localhost:8080/geoserver/wfs 2000% 240ms 
头 信息 Post 响应 XML 
ows:ExceptionReport xalns:xs="http://wr. #3. crg 
/2001/DuLschera” xalns:ovs="http://w. opengis. net/ors” xmlns:xsi"http: 
/Verw w3. org/2001/DLSchena-instance” version=”1. 0.0” xsi:schemaLocation= http: 


/ /rw. opengis. net/ovs http://localhost:8080/seoserver/schenas/ors/1.0.0 
/owsExceptionReport. xsd”> 
ovs:Exception exceptionCode™’InvalidParameterValue” locator=’typeNane”》 
ows:ExceptionText) Could not locate {http://wr. opengeospatial. net 
/wsbgisjvancouver in catalog. C/ovs:ExceptionText》 
/ows:Exception)? 
/ows:ExceptionReport》 


9.7 命名 空间 URI 或 图 层 名 称 错误 时 服务 器 返回 的 异常 响应 
如 果 异 常 响应 中 包含 如 下 类 似 的 信息 ， 则 表示 空间 坐标 对 应 的 字段 名 设置 错误 了 。 
<ows:ExceptionText>Illegal property name: the geom for feature type webgis:vancouver</ows: 
ExceptionText> 
</ows:Exception> 
对 于 这 类 错误 ， 可 按照 前 面 介绍 的 方法 ， 通 过 仔细 查看 GeoServer 的 Web 管理 页 面 中 的 
信息 而 进行 改正 。 
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9.4 习 题 


(1) 利用 下 载 文件 “Codes\Assignment09” 文 件 夹 中 的 postal_code_fsa.zip， 将 其 中 的 
Shapefile 数据 发 布 为 服务 ， 并 编码 对 其 进行 符号 化 与 标注 ， 使 得 运行 效果 如 图 9.8 所 示 。 


二- 1 
图 9.8 对 WFS 图 层 进行 符号 化 及 标注 

(2) 利用 地 址 为 “http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version 
=1.1.0&typename=og:roads ”的 WFS 服务 以 及 OpenLayers.Control.Snapping 与 OpenLayers. 


Control.Split 两 控件 ， 编 码 实 现 数据 编辑 时 的 线 捕捉 与 打 断 功能 ， 运 行 效果 如 图 9.9 所 示 。 参 
考 代码 见 下 载 文件 “Codes\Assignment09\Wfs-Snap-Splithtml” 文 件 。 


-SE NS 


9.9 ”数据 编辑 过 程 中 线 的 捕捉 与 打 断 功能 
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WCS 及 多 维 数据 


从 本 章 可 以 学 习 到 : 


部 WCS 及 其 操作 

部 多 维 数据 与 图 像 镶 嵌 插 件 

加 多 维 数据 WCS 的 发 布 

加 在 OpenLayers 中 访问 WCS 


- Web GIS 原理 与 应 用 开发 


在 第 9 章 介绍 的 WFS 是 在 Web 上 发 布 矢量 数据 服务 ， 而 对 于 栅 格 数据 服务 ，OGC 制定 
的 则 是 WCS (Web Coverage Services， 网 络 覆盖 服务 ) 。WCS 服务 所 返回 的 数据 可 作为 分 析 
和 建 模 操作 的 输入 参数 。 这 与 OGC WMS 服务 形成 鲜明 对 比 ， 后 者 仅 返回 数据 的 图 片 。 通 过 
WCS 服务 获取 的 栅 格 数据 集 被 称 为 覆盖 。 不 要 将 此 覆盖 与 ArcGIS 先前 版 本 中 所 提供 的 矢量 
数据 集 〈 也 称 为 覆盖 ) 相 混淆 。 

本 章 将 介绍 WCS 服务 规范 及 其 在 多 维 数据 中 的 应 用 ， 以 及 如 何 利 用 GeoServer 将 带 有 时 
间 与 高 程 信息 的 多 维 数据 发 布 为 WCS 服务 。 


10.1 WCS 及 其 操作 


WCS 是 由 OGC 创建 的 用 于 在 Web 上 共享 覆盖 地 理 信息 的 开放 规范 。 这 里 的 覆盖 意 指 表 
示 空 间 变 化 现象 的 地 理 信息 。 可 以 把 WCS 看 作为 栅 格 数据 的 Web 要 素 服务 。 它 是 以 原始 图 
像 方式 获取 地 图 的 “ 源 代 码 ”， 而 不 是 原始 矢量 数据 方式 。 

虽然 WCS 与 WMS 从 服务 器 上 返回 的 都 是 以 图 像 ,但 是 它们 之 间 一 个 重要 的 区 别 是 WCS 
能 够 返回 更 多 的 详细 信息 ， 包 括 有 价值 的 元 数据 和 更 多 的 格式 ， 返 回 的 数据 可 作为 分 析 和 建 
模 操作 的 输入 参数 。 此 外 ， 如 果 WCS 是 一 个 多 维 格式 ， 那 么 可 实现 更 为 精确 的 查询 。 

WCS 服务 支持 以 下 操作 : 

(1) 请 求 服务 级 别 元 数据 和 数据 的 简要 描述 (GetCapabilities〉。 

(2) 请 求 一 个 或 多 个 覆盖 的 完整 描述 (DescribeCoverage) 。 

(3) 以 熟知 的 格式 请 求 覆盖 〈GetCoverage) 。 


10.1.1 GetCapabilities 操作 


GetCapabilities 操作 用 于 得 到 WCS 服务 器 所 支持 的 操作 和 服务 〈 能 力 ) 的 列表 。 
-个 典型 的 WMS 服务 的 GetCapabilities 请 求 使 用 如 下 的 地 址 (针对 

http://www.example.com/wcs 地 址 ) : 

http://www.example.com/wes?service=WCS&request=GetCapabilities 

例如 对 于 本 地 计算 机 安装 的 GeoServer， 其 请 求 地 址 如 下 : 

http://localhost:8080/geoserver/ows?service=WCS&request=GetCapabilities 

由 于 许多 WCS 支持 多 个 版 本 ， 事 实 上 当前 许多 服务 同时 支持 WCS 1.0.0 与 1.1.x， 甚 至 
是 2.0.x, 因此 如 果 在 请 求 地 址 中 没有 包含 版 本 参数 , 那么 得 到 的 是 可 获取 的 最 新 版 本 的 信息 。 
通过 查看 此 信息 ， 便 可 得 到 服务 支持 的 所 有 版 本 信息 。 例 如 上 述 地 址 返回 的 响应 中 包含 如 下 
描述 所 支持 的 版 本 信息 : 


<ows:ServiceType Version>2.0.1</ows:ServiceType Version> 
<ows:ServiceType Version>1.1.1</ows:ServiceType Version> 
<ows:ServiceType Version>1.1.0</ows:ServiceType Version> 
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而 对 于 特点 版 本 ， 可 在 地 址 中 通过 version 参数 中 指定 版 本 ， 例 如 : 

http://localhost:8080/geoserver/ows?service=WCS&version=1.1.1&request=GetCapabilities 

在 返回 的 GetCapabilites 文档 中 ，OperationsMetadata 部 分 包含 了 服务 支持 的 操作 。 

GetCapabilites 文档 中 Contents 部 分 包含 了 各 个 覆盖 的 ID 以 及 其 他 一 些 信息 ， 例 如 所 包 
含 的 波段 数 。 下 面 是 本 地 GeoServer 返回 的 GetCapabilites 文档 Contents 部 分 中 一 个 覆盖 的 信 
息 : 


<wcs:CoverageSummary> 
<wWcs:CoverageId>nurc mosaic</wcs:CoverageId> 
<wcs:CoverageSubtype>RectifiedGridCoverage</wcs:CoverageSubtype> 
<ows:WGS84BoundingBox> 
<ows:LowerComer>6.346 36.492</ows:LowerCorner> 
<ows:UpperCorner>20.83 46.591</ows:UpperCorner> 
</ows:WGS84BoundingBox> 
<ows:BoundingBox crs="http://www.opengis.net/def/crs/EPSG/0/EPSG:4326"> 
<ows:LowerComer>6.346 36.492</ows:LowerCorner> 
<ows:UpperCorner>20.83 46.591</ows:UpperCorner> 
</ows:BoundingBox> 
</wcs:CoverageSummary> 


得 到 覆盖 的 ID 后 , 便 可 执行 DescribeCoverage 操作 了 .。 要 注意 的 是 ,上 面 的 GetCapabilites 
文档 是 使 用 2.0.1 版 本 请 求 所 返回 的 响应 , 覆盖 ID 使 用 的 是 Coverageld, 而 对 于 1.1.1 的 版 本 ， 
使 用 的 是 Identifier。 在 构造 DescribeCoverage 操作 与 GetCoverage 操作 时 ， 对 于 不 同 版 本 ， 需 
要 使 用 其 对 应 的 参数 。 


10.1.2 ”DescribeCoverage 操作 


DescribeCoverage 操作 允许 客户 端 请 求 某 个 WCS 服务 的 一 个 或 多 个 栅 格 图 层 的 全 部 描述 
信息 。 服 务 端 会 返回 描述 所 请 求 的 覆盖 图 层 详细 信息 的 XML 文档 。 
DescribeCoverage 操作 的 主要 请 求 参数 〈1.1.1 版 本 ) 如 表 10.1 所 示 . 


表 10.1 DescribeCoverage 操作 请 求 主要 参数 (1.1.1 版 本 ) 


请 求 参数 是 否 必需 | 描述 | 
service=WCS 是 服务 类 型 | 
request=DescribeCoverage 是 请 求 名 称 | 
version 是 请 求 的 WCS 服务 的 版 本 

if 指定 所 要 请 求 的 图 层 


identifiers=identifierl, identifier2 


例如 对 于 GeoServer 中 nurc 工作 区 中 的 mosaic, 其 DescribeCoverage 操作 请 求 地 址 如 下 : 
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http://localhost:8080/geoserver/ows?service=WCS&version=1.1.1&request=DescribeCoverag 
e&identifiers=nurc:mosaic 


10.1.3 GetCoverage 操作 


通过 GetCapabilities 和 DescribeCoverage 这 两 个 操作 , 可 以 了 解 服务 端 允许 哪些 请 求 以 及 
哪些 数据 是 可 以 获取 的 ， 然 后 进行 GetCoverage 操作 。 该 操作 最 终 返回 指定 地 理 范围 内 指定 
域 值 内 的 某 栅 格 数据 。 

在 构造 GetCoverage 操作 时 , 除了 包含 service、request、version 与 identifiers 参数 值 之 外 ， 
还 需要 包含 domainSubset 参数 。 该 参数 定义 所 要 请 求 覆盖 的 时 空 范围 , 它 又 包含 boundingBox 

( 必 选 ) 和 temporalSubset〈 可 选 ) 两 个 参数 ， 前 者 指定 地 理 范围 ， 后 者 指定 时 间 范 围 。 此 外 ， 
还 需要 用 output 参数 指定 输出 设置 ， 该 参数 又 包括 gridCRS 〈 返 回 数据 的 地 理 参 照 系 统 ， 可 
选 ) 、format (返回 数据 的 格式 ， 必 选 ) 和 store (“true” 表 示 需 要 服务 端 把 返回 数据 的 所 有 
内 容 存储 在 一 个 网 络 位 置 ， 并 返回 其 URL; “false” 表 示 需 要 服务 端 直接 返回 数据 二 者 可 
选 ) 。 

例如 对 于 GeoServer 中 nurc 工作 区 中 的 mosaic， 其 GetCoverage 操作 请 求 地 址 如 下 : 

http://localhost:8080/geoserver/ows?service=WCS& Version=1.1.1&REQUEST=GetCoverage 
&ldentifier=nurc:mosaic&BoundingBox=36.492,6.346,46.591,20.83,urn:ogc:def:crs:EPSG::4326& 
Format=image/png&Store=true 

服务 器 端 接 到 请 求 后 ， 根 据 客户 端 发 送 请 求 中 的 参数 ， 以 output 中 format 指定 的 格式 返 
回 符合 条 件 的 数据 ， 同 时 返回 数据 相关 的 元 信息 。 例 如 上 述 请 求 地址 返回 类 似 如 下 的 响应 : 


<Wcs:Coverage> 

<ows:Title>mosaic</ows:Title> 

<ows:Abstract>Generated from ImageMosaic</ows:Abstract> 

<ows:Identifier>mosaic</ows:Identifier> 

<ows:Reference xlink:hre 人 "http://localhost:8080/geoserver/temp/wes/mosaic_105888126054900.png"/> 
</wes:Coverage> 


Reference 的 http://localhost:8080/geoserver/temp/wecs/mosaic_105888126054900.png 地 址 便 
是 指定 返回 的 覆盖 数据 ， 访 问 该 地 址 ， 可 以 得 到 图 10.1 所 示 的 结果 。 

然而 在 GeoServer 的 Web 管理 页 面 中 , 通过 OpenLayer 来 预览 nurc:mosaic 时 却 得 到 一 个 
坐标 轴 不 同 的 图 像 ， 如 图 10.2 所 示 。 


194 


第 10 章 WCS 及 多 维 数据 二 


EL :| 
@ 国 http;//localhost8080, P - cj 
文件 昌 ”六 加 旧 可 看 (VW) 收 训 天 工具 ” - -EN 


国 opentayers mapprevew x | + 


localhost8080/geoserveynurcwmsxs 7 了 C| 易 人 月 天 |” 四 | 三 


14.49325, 46.5056 , 
< 首 > 


10.1 使 用 GetCoverage 操作 获取 覆盖 数据 图 10.2 通过 OpenLayer 预览 nurc:mosaic 
这 主要 还 是 由 于 历史 原因 造成 的 ， 有 具体 说 明 请 查看 如 下 地 址 的 说 明文 档 : 


http://docs.geoserver.org/latest/en/user/services/wfs/basics.html#axis-ordering 

解决 方案 是 在 请 求 参数 中 增加 GridBaseCRS 参数 ， 例 如 对 于 前 面 的 请 求 地 址 ， 将 其 修改 
为 如 下 地 址 便 能 得 到 正确 的 图 像 : 

http://localhost:8080/geoserver/ows?service=WCS& Version=1.1.1&REQUEST=GetCoverage 
&ldentifier=nurc:mosaic&BoundingBox=36.492,6.346,46.591,20.83,urn:ogc:def:crs:EPSG::4326& 
GridBaseCRS=EPSG:4326&Format=image/png&Store=true 

而 对 于 2.0.1 的 版 本 ,就 没有 必要 再 这 么 处 理 了 ， 而 且 请 求 也 相对 要 简单 。 例 如 可 使 用 如 
F 2.0.1 版 本 的 请 求 地 址 ， 获 取 nurc 工作 区 中 mosaic 覆盖 ， 并 且 直 接 返 回 图 像 : 


http://localhost:8080/geoserver/wes?service=WCS&version=2.0.1&Coverageld=nurc __mosaic 


Rrequest=GetCoverage&format=image/png 


10.2 ”多维 数据 与 图 像 锐 嵌 插 件 


地 理 数 据 ， 特 别 是 遥感 数据 ， 通 常 是 多 维 的 。 例 如 遥感 数据 通常 包含 多 个 波段 的 数据 。 
在 GeoServer 中 默认 就 可 包含 时 间 与 高 程 维 度 。 此 外 ,还 可 以 利用 GeoServer 的 图 像 融合 插件 
(ImageMosaic Plugin) 创建 多 维 图 像 。 


10.2.1 多 维 数据 


气象 和 海洋 领域 ， 温度、 湿度 以 及 洋流 等 地 球 物理 参数 在 不 同 的 时 间 、 深 度 是 不 一 样 
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的 ， 因 此 这 些 数据 通常 包含 时 间 、 深 度 以 及 压力 等 维度 ， 如 图 10.3 所 示 。 


-7E*00 9E100 00 .600 64E*00 0E+0 


Monthly L Mean of V-Wind (m/s) 


7E+00 49E*0 “12E+00 2 人 E*00 GAE*00 EC 
Da Mn STE00 Mn + 20E00 


10.3 不 同时 间 和 不 同 大 气压 力 水 平 下 风 的 V 量 月 平均 值 


现 假设 有 某 一 个 用 于 预测 一 系列 深度 下 不 同时 间 海 水 温度 的 海洋 学 模型 ， 或 者 用 于 预测 
不 同 维度 不 同时 间 风 力 的 气象 学 模型 ， 可 以 将 这 些 实体 想象 为 多 维 数据 或 超 立 方 体 ， 其 维度 
包含 平面 空间 的 两 个 维度 、Z 维度 〈 海 拔 /高 度 /深度 /压力 ) 以 及 时 间 维 度 ， 如 图 10.4 所 示 。 
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ee 


经 度 
10.4 ”将 气温 表示 为 四 维 超 立 方 体 

类 似 的 概念 可 以 应 用 于 遥感 数据 。 卫 星 传感器 在 不 同时 间接 收 不 同 波长 的 辐射 。 在 这 种 
情况 下 ， 波 长 可 以 被 认为 是 一 个 额外 的 维度 。 

对 于 这 种 类 型 的 数据 ， 需 要 特定 的 管理 、 处 理 和 服务 。 这 类 数据 服务 在 标准 的 二 维 空间 
维度 之 外 ， 还 需要 识别 那些 额外 维度 时间、 高 程 、 自 定义 维度 ) ， 并 允许 用 户 在 这 些 维 度 
之 间 请 求 数据 子 集 。 

例如 ， 用 户 与 这 些 服务 进行 交互 时 ， 可 能 想 要 检索 在 某 月 某 日 按 一 定 深 度 收集 的 当时 水 
温 数据 。 该 请 求 除了 空间 维度 之 外 ， 还 包含 了 时 间 维 度 ， 如 图 10.5 所 示 。 


© HQ yersgtime=2012-10-16TD1:01:26 000z8elevation =1297.480 


§ 


i C 着 Q enayersatime=2012-1D-10T09:5126.0007&eleyaticn=49.430 


多 


Scals = 1; 173M 
Cick on the map to get ed 


Scale = 1; 173M -133.040¢, 117 19001 
Chick on the map to gat ature nO 


图 10.5 利用 OpenLayer 预览 某 一 矢量 数据 中 不 同 维度 的 数据 子 集 
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10.2.2 图像 镶 典 插 件 


图 像 镶 嵌 是 用 于 将 一 组 带 地 理 参考 的 栅 格 文件 镶嵌 在 一 块 的 插件 ， 由 GeoTools 提供 。 该 
插件 可 用 于 GeoServer 所 使 用 的 大 多 数 格式 (如 GeoTIFF) 、 带 世界 文件 的 栅 格 、 一 些 GDAL 
支持 的 格式 ， 以 及 NetCDF 和 GriB 文件 。 

简单 地 说 ， 图 像 镶嵌 插件 负责 将 一 组 类 似 的 栅 格 数据 归 为 一 组 ， 将 它们 作为 一 个 栅 格 数 
据 集 (也 可 能 是 多 维 的 ) 对 外 提供 服务 。 例 如 ， 图 像 镶嵌 插件 可 用 于 下 列 一 些 情况 : 

(1) 将 一 组 空间 邻近 的 遥感 图 像 进行 镶 幅 ; 

(2) 将 同一 地 理 范 围 内 不 同时 间 与 /或 不 同 高 程 或 不 同 维度 〈 例 如 风向 ) 的 栅 格 数据 进 
行 镶 懂 ， 组 成 一 多 维 数据 集 。 

在 GeoServer 中 ， 通 过 指定 一 镶嵌 根 目录 来 设置 图 像 镶 嵌 。 通 常 ， 该 目录 中 包含 一 组 要 
被 镶嵌 的 数据 文件 以 及 一 组 配置 文件 。 图 像 镶 习 插 件 首先 通过 解析 提供 的 配置 文件 ， 然 后 从 
根 目录 中 去 寻找 镶嵌 数据 。 镰 嵌 插 件 会 检查 找到 的 每 个 镶嵌 数据 ， 看 其 是 否 已 经 属于 某 一 已 
经 配置 的 覆盖 或 是 一 个 新 文件 。 然 后 它 会 根据 数据 类 型 、 坐 标 参 照 系统 、 波 段 数 等 特征 ， 更 
新 内 部 的 数据 子 集 目录 ， 以 将 它们 组 合 起 来 。 

这 些 组 成 灸 嵌 的 一 组 数据 与 其 相关 信息 〈 位 置 、 空 间 范 围 等 ) 保存 为 索引 ， 该 索引 可 以 
是 一 个 Shapefile 文件 、 一 个 PostGIS 数据 库 、 一 个 Oracle 数据 库 或 一 个 H2 数据 库 。 对 于 将 
这 些 信 息 存 在 数据 库 管 理 系统 中 还 是 存在 一 简单 的 Shapefile 中 ， 可 以 在 一 个 名 为 
datastore.properties 的 配置 文件 中 通过 设置 来 指定 。 此 外 ， 还 可 以 通过 一 组 辅助 文件 ， 来 指定 
该 镶嵌 中 可 获取 的 维度 、 索 引 以 及 获取 维度 值 的 方式 。 我 们 将 在 实践 部 分 再 详细 描述 。 

- 旦 配置 了 图 像 镶嵌 , 通常 获取 其 中 数据 子 集 的 方式 是 通过 OGC 的 服务 请 求 , 例如 使 用 
WMS 请 求 获取 栅 格 数据 的 地 图 ， 或 使 用 WCS 请 求 获取 源 数 据 。 


10.3 实践 15: 多 维 数 据 WCS 的 发 布 


本 实践 将 介绍 如 何 使 用 图 像 镶嵌 插件 构建 一 个 时 间 序 列 的 覆盖 。 该 覆盖 保存 为 一 可 查询 
的 结构 ， 允 许 通过 时 间 条 件 来 得 到 具体 的 数据 集 。 


10.3.1 发布 时 间 序 列 栅 格 数据 


(1) 数据 准备 。 

建立 一 个 简单 的 文件 夹 ， 例 如 本 实践 使 用 “Ci\Data\snowLZWdataset”。 并 将 下 载 文 件 
“Datasnow ”文件 夹 中 的 4 个 文件 复制 进来 。 其 中 3 个 分 别 是 snow_20091001.tif、 
snow_20091101.tif 与 snow_20091201.tif 表示 3 个 不 同时 间 的 栅 格 数据 ， 另 一 个 名 为 
snow_style.sld， 是 个 样式 文件 。 

(2) 设置 配置 文件 。 
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对 于 时 间 序 列 影像 需要 3 个 配置 文件 。 一 个 是 与 图 层 名 同名 的 .properties 文件 ， 该 文件 包 
含 将 镶嵌 空间 索引 存储 到 数据 库 中 所 需要 的 相关 信息 。 如 果 是 使 用 Shapefile 作为 索引 存储 ， 
则 GeoServer 会 自动 生成 该 文件 。 本 实践 就 是 使 用 该 方式 ， 因 此 不 需要 创建 。 

第 二 个 文件 是 indexer.properties, 该 文件 指定 时 间 变 量 属性 、 高 程 属性 的 名 称 以 及 这 些 属 
性 的 类 型 。 在 C:datavsnowLZWdataset 文件 夹 中 创建 一 个 名 为 indexer.properties 的 文本 文件 ， 
其 内 容 如 下 : 

TimeAttribute=ingestion 

ElevationAttribute=elevation 

Schema=*the geom:Polygon,location:String,ingestion:java.util.Date,elevation: Integer 

PropertyCollectors=TimestampFileNameExtractorSPI[timeregex](ingestion) 


第 三 个 文件 是 timeregex.properties， 指 定 了 从 文件 名 提取 时 间 信 息 的 规则 表达 式 。 在 
“Ci\Data\snowLZWdataset” 文 件 夹 中 创建 一 个 名 为 timeregex.properties 的 文本 文件 ， 其 内 容 
如 下 : 
regex=[0-9] {8} 


(3) 修改 GeoServer 启动 参数 。 
要 支持 时 间 序列 图 层 ，GeoServer 需要 配置 合适 的 时 区 。 为 了 将 时 区 设置 为 协调 通用 时 间 
(Coordinated Universal Time，UTC) ， 需 要 在 加 载 Java 程序 时 加 入 适当 的 参数 。 
用 文本 文件 的 方式 打开 GeoServer 的 启动 程序 startup.bat 文件 ， 如 果 是 默认 安装 ， 那 么 该 
文件 位 于 “C:\Program Files\GeoServer 2.6.2\bin ”文件 夹 中 。 在 该 文件 的 最 后 一 个 参数 , 即 “-jar 
"C:\Program Files\GeoServer 2.6.2\startjar"” 前 面 加 入 如 下 参数 : 


-Dusertimezone=GMT 

如 果 使 用 Shapefile 作为 镶嵌 索 引 存储 ， 那 么 还 需要 加 入 如 下 参数 ， 以 使 Shapefile 支持 时 
间 惟 : 

-Dorg.geotools.shapefile.datetime=true 


(4) 创建 图 像 镶 嵌 数 据 存储 。 

启动 GeoServer， 用 admin 身份 登录 进入 GeoServer 的 Web 管理 页 面 。 新 建 一 个 
ImageMosaic 类 型 的 数据 存储 。 将 工作 区 选择 为 webgis, 数据 源 名 称 设置 为 “snow_file_store”， 
URL 设置 为 在 第 一 步 中 创建 的 目录 ， 基 本 设置 如 图 10.6 所 示 。 
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添加 栅 格 数据 源 


说 明 


JmageMosaic 
Jmage mosaicking plugn 


存储 库 的 基本 信息 
工作 区 = 


webgis Iv| 
数据 恶名 称 * 
snovw_ file_store 


10.6 ”新 建 ImageMosaic 数据 存储 


单 击 “ 保 存 ” 按 钮 后 ，GeoServer 在 数据 存储 对 应 的 目录 中 创建 用 于 镶嵌 的 相关 文件 
(.dbf、.prj、.properties、.shp 与 .shx) 。 如 果 在 该 目录 中 已 经 存在 同名 文件 ， 则 会 出 现 错误 。 
(5) 增加 新 图 层 。 
在 “添加 栅 格 数据 源 ” 中 设置 了 新 的 数据 存储 之 后 ，GeoServer 的 Web 管理 页 面 将 进入 
图 10.7 所 示 的 页 面 。 
新 建 图 层 


添加 一 个 新 图 层 


On stores you can also create a new coverage view by merging different coverages as a multibands coverage. Configure new Coverage view ... 
Here is a list of resources contained in the store ‘snow_fie_store'. 点 击 你 要 配置 的 图 层 


Resukts 1 to 1 (out of 1 Kems) 


发 布 的 图 层 名 称 


snow 


Resukts 1 to 1 (out of 1 Rems) 


图 10.7 新 建 图 层 页 面 

在 该 页 面 中 ， 单 击 “ 发 布 ”按钮 ， 进 入 “编辑 图 层 ” 页 面 。 

(6) 配置 图 层 及 其 发 布 信息 。 

在 “编辑 图 层 ” 页 面 中 ， 基 本 配置 信息 都 已 经 自动 填 好 ， 需 要 设置 的 是 “覆盖 参数 ”部 
分 。 其 中 主要 相关 参数 是 AllowMultithreading 与 USE_JAI IMAGEREAD。 并 根据 Ti 任 文 件 设 
置 背景 值 。 当 同时 又 几 个 图 像 满足 时 间 条 件 时 ， 如 果 希 望 控制 显示 其 中 哪 一 个 ， 那 么 则 需要 
设置 SORTING 参数 。 在 该 参数 中 ， 首 先 要 设置 排序 使 用 的 变量 名 称 ， 然 后 是 一 个 空格 ， 最 
后 是 DD 或 A。D 表示 降序 ，A 表示 升序 。 请 按照 图 10.8 设置 参数 。 


200 


第 10 章 WCS 及 多 维 数据 = 


None 
InputTransparentColor 


MaxAllowedTiles 
MergeBehavior 

PLAT 
OutputTransparentColor 


图 10.8 设置 覆盖 参数 


(7) 设置 样式 。 
为 了 能 正确 显示 数据 ， 需 要 使 用 特殊 的 样式 。 按 照 前 面 内 容 介绍 的 方法 ， 将 snow 文件 夹 
中 的 snow_style.sld 上 传 到 GeoServer 中 ， 创 建 名 为 snow_style 的 样式 。 并 将 webgis:snow 图 
层 的 默认 样式 设置 为 snow_style。 
(8) 设置 时 间 属 性 。 
在 “编辑 图 层 ” 页 面 中 ， 切 换 到 “维度 ”选项 卡 。 首 先 在 “时 间 ” 下 面 选择 “启用 ”， 
在 “简报 ”中 选择 “列表 ”， 表 示 在 GetCapabilites 请 求 响 应 中 包含 列 出 所 有 可 获取 的 时 间 ， 
具体 如 下 : 


<Dimension name="time" default="2009-10-01T00:00:00Z" units="ISO8601"> 
2009-10-01T00:00:00.0002,2009-11-01T00:00:00.0002Z,2009-12-01T00:00:00.000Z 
</Dimension> 


其 他 选项 还 有 “连续 间隔 ”与 “间隔 与 分 辩 率 ”。 时 间 属 性 的 设置 如 图 10.9 所 示 。 
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编辑 图 层 


编辑 层 数据 并 且 发 布 


webgis:snowLZWdataset 
配置 当前 图 层 的 和 发 布 信息 


[Use the saallest domain value 


高 程 


图 10.9 时间 属性 设置 
切换 到 “Ci\Data\snowLZWdataset” 文 件 夹 中 ， 打 开 GeoServer 生成 的 snowLZWdataset. 


properties 文件 ， 其 主要 内 容 如 下 : 


Levels=100.0,100.0 
Heterogeneous=false 
ElevationAttribute=elevation 
TimeAttribute=ingestion 
AbsolutePath=false 
Name=snowLZWdataset 
TypeName=snowLZWdataset 
Caching=false 
ExpandToRGB=false 
LocationAttribute=location 
SuggestedSPI=it.geosolutions.imageioimpl.plugins.tiff.TIFFImageReaderSpi 
CheckAuxiliaryMetadata=false 
LevelsNum=1 


(9) 图 层 预 览 。 
对 于 时 间 序列 影像 ， 为 了 显示 某 个 时 间 点 的 地 图 ， 需 要 在 请 求 中 增加 时 间 参 数 ， 形 式 为 


“&time= < 时 间 >”。 


对 于 本 实践 ， 可 先 使 用 OpenLayer 查看 webgis: snowLZWdataset 图 层 ， 也 可 以 直接 在 浏 


览 器 中 输入 如 下 地 址 : 


http://localhost:8080/geoserver/webgis/wms?service=WMS&version=1.1.0&request=GetMap 


&layers=webgis:snowLZWdataset&styles=&bbox=624800.0,5171500.0,632600.0,5184500.0&widt 
h=307&height=512&srs=EPSG:32632&format=application/openlayers 
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为 了 获得 2009 年 10 月 、11 月 与 12 月 的 地 图 ， 则 可 在 上 述 地 址 后 面 分 别 加 上 
&time=2009-10-01、&time=2009-11-01 与 &time=2009-12-01 即 可 。 

由 于 在 发 布 服务 时 ， 将 时 间 的 默认 值 设置 为 了 “Use the smallest domain value”， 即 最 小 
值 ， 因 此 在 不 带 时 间 参 数 时 默认 显示 的 是 2009 年 10 月 的 数据 。 

通过 对 比 3 个 图 像 ， 可 以 分 析 雪 覆盖 随时 间 的 变化 ， 如 图 10.11 所 示 。 颜 色 越 深 表示 雪 
越 多 。 


国 openLayers map preview x | 图 openLyes mappreview x | | 图 openlayers mapprevien x |+ 
2009-12-01 TC 及 4 


和 四 Im 


2009-10-01 | @ )@ > 


4 


=2009-11.01| (€ ]@ en 


Scale -1: 636962.10938, 5|| Scale =1; 635657.42108,5! Scale 1: 637571.46436, 5191101.56250 
181K 181K 


Click on the map to get feature || Click on the map to get feature | Cick on the map to get feature info 


图 10.10 通过 时 间 参 数 获取 指定 时 间 点 的 图 像 


(10) 用 WCS 请 求 数 据 。 
在 前 一 步 中 ， 使 用 的 是 OpenLayer 预览 图 层 服 务 ， 其 内 部 使 用 的 是 WMS 服务 。 当 然 也 
可 以 使 用 WCS 来 请 求 原始 数据 。 
首先 使 用 DescribeCoverage 获取 覆盖 描述 。 请 求 地 址 如 下 : 
http://localhost:8080/geoserver/ows?service=WCS&version=2.0.1&Coverageld=webgis_ sno 
wLZWdataset&request=DescribeCoverage 
该 请 求 会 显示 创建 的 多 维 履 盖 的 详细 信息 。 注 意 观察 文档 中 有 关 时 间 维 度 的 描述 。 相 关 
内 容 如 下 : 
<wcsgs:TimeDomain default="2009-12-01T00:00:00.000Z"> 
<gml:TimeInstant gml:id="webgis snowLZWdataset td 0"> 
<gml:timePosition>2009-10-01T00:00:00.000Z</gml:timePosition> 
</gml:TimeInstant> 
<gml:TimeInstant gml:id="webgis _ snowLZWdataset td 1"> 
<gml:timePosition>2009-11-01T00:00:00.000Z</gml:timePosition> 
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</gml:TimeInstant> 
<gml:TimeInstant gml:id="webgis snowLZWdataset td 2"> 
<gml:timePosition>2009-12-01T00:00:00.000Z</gml:timePosition> 
</gml:TimeInstant> 
</wcsgs:TimeDomain> 


要 使 用 GetCoverage 操作 得 到 某 个 时 间 点 的 覆盖 数据 ， 则 需要 加 入 一 个 时 间 的 subset 参 
数 。 例 如 要 获取 2009 年 11 月 1 日 的 数据 ， 可 使 用 如 下 地 址 : 

http://localhost:8080/geoserver/ows?service=WCS&version=2.0.1&Coverageld=webgis_ sno 
wLZWdataset&request=GetCoverage&format=geotiff&subset=http://www.opengis.net/def/axis/O 
GC/0/time("2009-11-01T00:00:00.0002Z") 

浏览 器 会 下 载 一 个 名 为 webgis_snowLZWdatasettif 的 文件 ， 该 文件 中 包含 了 请 求 的 数 
据 。 

当然 ， 我 们 不 一 定 要 指定 原始 文件 中 的 几 个 时 间 点 ， 例 如 我 们 可 以 使 用 如 下 URL 请 求 
2009 年 11 月 15 日 的 数据 : 

http://localhost:8080/geoserver/ows?service=WCS&version=2.0.1&Coverageld=webgis_ sno 
wLZWdataset&request=GetCoverage&format=geotiff&subset=http://www.opengis.net/def/axis/O 
GC/0/time("2009-11-15T00:00:00.0002Z") 


10.3.2 发布 时 间 序 列 与 高 程序 列 栅 格 数据 


下 面 将 介绍 如 何 发 布 同 时 带 有 时 间 序 列 与 高 程 系列 的 栅 格 数据 。 

(1) 数据 复制 。 

建立 一 个 简单 的 文件 夹 , 例如 “Ci\Data\ temperatureLZWdataset”。 并 将 下 载 文 件 “Data\ 
temperature ”文件 夹 中 的 4 个 Tiff 文件 复制 进来 。 这 几 个 文件 的 命名 规则 是 : 


{ 覆 盖 名 称 }_{ 时 间 戳 } (高 程 }tiff 


(2) 设置 配置 文件 。 

对 于 同时 带 有 时 间 序 列 与 高 程 系列 的 栅 格 数据 ， 需 要 比 只 带 有 时 间 需 要 的 数据 多 增加 一 
个 elevationregex.properties 文件 ， 用 于 规定 如 何 从 文件 名 中 提取 高 程 信息 。 

在 “C:\DatattemperatureLZWdataset” 文 件 夹 中 创建 一 个 名 为 indexer.properties 的 文本 文 
件 ， 其 内 容 如 下 : 


Caching=false 

TimeAttribute=ingestion 

ElevationAttribute=elevation 

Schema=*the_geom:Polygon,location:String,ingestion:java.util.Date,elevation: Double 

PropertyCollectors=TimestampFileNameExtractorSPI[timeregex](ingestion),DoubleFileNameExtractorSPI[ele 
vationregex](elevation) 
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在 “C:\DatavtemperatureLZWdataset” 文 件 夹 中 创建 一 个 名 为 timeregex.properties 的 文本 
文件 ， 其 内 容 如 下 : 


regex=[0-9]{8}T[0-9] {9}2Z0\?!\*[0-9] {8}T[0-9] {9}2Z.\*) 


在 “C:\Data\temperatureLZWdataset” 文 件 夹 中 创建 一 个 名 为 elevationregex.properties 的 
文本 文件 ， 其 内 容 如 下 : 


regex=(?<= ddG3DO= ) 


(3) 创建 图 像 镶嵌 数据 存储 。 

在 GeoServer 的 Web 管理 页 面 中 ， 新 建 一 个 ImageMosaic 类 型 的 数据 存储 。 将 工作 区 选 
择 为 webgis， 数 据 源 名 称 设置 为 “temperature_file_store”，URL 设置 为 在 第 一 步 中 创建 的 目 
录 ， 即 C:\Data\temperatureLZWdataset。 

(4) 发 布 图 层 。 
发 布 图 层 与 前 面 类 似 ， 只 是 需要 再 启用 高 程 。 设 置 如 图 10.11 所 示 。 


Webgis:temperatureLZWdataset 
配置 当前 图 层 的 和 发 布 信息 


数据 发布 维度 TieCaching 


Default value 


Use the smallest domain Value 


四 


图 10.11 同时 启用 时 间 与 高 程 维 度 
(5) 图 层 阅览 。 
为 了 显示 某 个 时 间 点 的 某 高 程 栅 格 数据 的 地 图 ， 需 要 在 请 求 中 增加 时 间 与 高 程 参 数 ， 形 
式 为 “&time= < 时 间 >&elevation=< 高 程 >”。 如 果 没 有 这 些 参数 将 使 用 默认 时 间 点 与 高 程 。 
例如 对 于 2013 年 3 月 10 日 下 午 6 点 在 海拔 200 米 处 的 气温 覆盖 地 图 ， 可 使 用 如 下 地 址 
来 获得 : 
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http://localhost:8080/geoserver/webgis/wms?service=WMS&version=1.1.0&request=GetMap&layers=webgis: 
temperatureLZW dataset&styles=&bbox=-30.0,25.0,45.0,70.0&width=550&height=330&srs=EPSG:4326&format=a 
pplication/openlayers&time=2013-03-10T18:00:00.000Z&elevation=200.0 


返回 的 图 像 如 图 10.12 所 示 。 


Scale =1: 58M -25.75195, 70.21973 
10.12 ” 某 个 时 间 点 的 某 高 程 处 的 气温 覆盖 


而 对 于 同一 个 时 间 点 的 300 米 高 程 处 气温 覆盖 ， 其 获取 请 求 地 址 最 后 部 分 为 
&time=2013-03-10T18:00:00.000Z&elevation=300.0。 
(6) 用 WCS 请 求 数据 。 
使 用 如 下 DescribeCoverage 请 求 获取 覆盖 的 详细 信息 : 
http://localhost:8080/geoserver/ows?service=WCS&version=2.0.1&Coverageld=webgis_ tem 


peratureLZWdataset&request=DescribeCoverage 
时 间 维 度 内 容 如 下 ， 包 含 两 个 时 间 点 : 


<wcsgs:TimeDomain default="2013-03-11T18:00:00.000Z"> 
<gml:TimeInstant gml:id="webgis temperatureLZWdataset td 0"> 
<gml:timePosition>2013-03-10T18:00:00.000Z</gml:timePosition> 
</gml:TimeInstant> 
<gml:TimeInstant gml:id="webgis_ temperatureLZWdataset td_1"> 
<gml:timePosition>2013-03-11T18:00:00.000Z</gml:timePosition> 
</gml:TimeInstant> 
</wcsgs:TimeDomain> 


高 程 维 度 内容 如 下 ， 包 含 两 个 高 程 项 : 


<wcsgs:ElevationDomain default="200.0" uom="m"> 
<wcsgs:SingleValue>200.0</wcsgs:SingleValue> 
<wcsgs:SingleValue>300.0</wcsgs:SingleValue> 

</wcsgs:ElevationDomain> 
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可 使 用 如 下 请 求 地 址 来 获取 2013 年 3 月 11 日 下 午 6 点 海拔 300 米 的 气温 覆盖 数据 : 


http://localhost:8080/geoserver/ows?service=WCS&version=2.0.1&Coverageld=webgis _ temperatureLZWda 
taset&request=GetCoverage&format=geotiff&subset=http://www.opengis.net/def/axis/OGC/0/time("2013-03-11T18 
:00:00.0002")&subset=http://www.opengis.net/def/axis/OGC/0/elevation(300) 


10.4 实践 16: 在 OpenLayers 中 访问 WCS 


在 OpenLayers 中 ， 并 没有 专门 用 于 访问 WCS 服务 的 类 ， 对 于 简单 WCS 服务 可 以 使 用 
OpenLayers.Layer.Image 类 来 实现 。 


10.4.1 页 面 设计 


新 建 一 个 名 为 Walkthrough16 的 文件 夹 ， 在 其 中 新 建 一 个 名 为 GetCoverage_v2_0_1.html 
的 文件 。 
在 GetCoverage_v2_0_1.html 页 面 中 加 入 如 下 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<title>OpenLayers WCS GetCoverage 实例 </title> 
<script sre="http://cdnis.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"> 
</script> 
<script></script> 
</head> 
<body onload="initO"> 
<hl id="title">WCS GetCoverage (v2.0.1) 实 例 </h1> 
<div id="map" style="width:500px; height:500px;'> 
</div> 
<br> 
<div id="docs"> 
可 使 用 覆盖 ; 
<select id="CoverageIDget" onchange="setCoverageExtent();"> 
<option value="-180.0,-90.0,180.0,90.0">nure_ Arc_Sample</option> 
<option value="-130.85168,20.7052,-62.0054,54.1141">nurc Img Sample 
</option> 
<option value="6.346,36.492,20.83,46.591">nurc_ mosaic</option> 
</select> 
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<button id="getCoverageBtn" type="button" onclick="getCoverage();"> 
<img id="getCoverageImg" class="btnImg" src="arrow.png"/>&nbsp:&nbsp; 
GetCoverage 
</button> 
</div> 
</body> 
</html> 


10.4.2 ”代码 设计 


(1) 初始 化 地 图 。 
在 <script> 与 </script> 之 间 加 入 如 下 代码 : 


var map, WCSimg; 
var fullExtLayer; 
var xmaxFullExt, ymaxFullExt, xminFullExt, yminFullExt; 


function init() { 
map = new OpenLayers.Map('map'); 
/ 设置 基础 底 图 
var ol wms = new OpenLayers.Layer.WMS( 
"OpenLayers WMS", 
"http://vmap0 .tiles.osgeo.org/wms/vmapO0", 
{ 
layers: "basic", 
maxExtent: [-180, -88.759, 180, 88.759], 
isBaseLayer: true 


六 
map.addLayer(ol wms); 


/ 显示 鼠标 位 置 处 的 坐标 
map.addControl(new OpenLayers.Control.MousePosition()); 
map.addControl(new OpenLayers.Control.LayerSwitcher( { 'ascending': false })); 


/ 用 于 绘制 覆盖 范围 的 矢量 图 层 

var fullExtLayer_style = OpenLayers.Util.extend( {}, OpenLayers.Feature.Vector.style['default]); 
fullExtLayer style.strokeColor = "#FF0000"; 

fullExtLayer_style.strokeWidth = 2; 

fullExtLayer_style.strokeDashstyle = "dashdot"; 
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fullExtLayer = new OpenLayers.Layer.Vector("AOI Polygons", { 
displayInLayerSwitcher: false, 
isBaseLayer: false, 
style: fullExtLayer_style 

DD); 


map.addLayer(fullExtLayer); 


// 设置 当前 选择 的 覆盖 的 范围 与 图 像 
setCoverageExtent(); 


// 为 了 确保 矢量 图 层 位 于 项 部， 创建 了 一 个 假 的 活动 控件 

var fullExtOnTopControl = new OpenLayers.Control.SelectFeature(fullExtLayer, { 
hover: false, 
autoActivate: true 


D); 
map.addControl(fullExtOnTopControl); 
} 


(2) 设置 选择 的 覆盖 的 空间 范围 。 
setCoverageExtent 函数 主要 用 于 获取 当前 选择 的 覆盖 的 空间 范围 ， 然 后 在 falIExtLayer 矢 
量 图 层 中 绘制 表示 该 范围 的 图 形 ， 最 后 调用 getCoverage 函数 获取 覆盖 的 图 像 。 代 码 如 下 : 


function setCoverageExtent() { 
vare= document.getElementById("CoverageIDget"); 
Var c_bbox = e.options[e.selectedIndex].value; 
varc bboxList = c bbox.split(","); 


xminFullExt = Number(c_bboxList[0]); 
yminFullExt = Number(c_bboxList[1]); 
xmaxFullExt = Number(c bboxList[2]); 
ymaxFullExt= Number(c bboxList[3]); 


var fullExtLineGeom = new OpenLayers.Geometry.LineString([ 
new OpenLayers.Geometry.Point(xminFullExt, yminFullExt), 
new OpenLayers.Geometry.Point(xmaxFullExt, yminFullExt), 
new OpenLayers.Geometry.Point(xmaxFullExt, ymaxFullExt), 
new OpenLayers.Geometry.Point(xminFullExt, ymaxFullExt), 
new OpenLayers.Geometry.Point(xminFullExt yminFullExt) 
D); 


fullExtLayer.destroyFeatures(); 
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fullExtLayer.addFeatures([new OpenLayers.Feature.Vector(fullExtLineGeom)]); 
fullExtLayer.redraw(); 


/ 将 地 图 缩放 到 覆盖 的 空间 范围 
map.zoomToExtent(new OpenLayers.Bounds(xminFullExt, yminFullExt, xmaxFullExt, ymaxFullExt)); 


// 将 覆盖 作为 一 个 图 像 获 取 
getCoverage(); 


(3) 利用 WCS 的 GetCoverage 操作 获取 覆盖 的 图 像 。 
getCoverage 函数 用 于 获取 覆盖 的 图 像 ， 其 代码 如 下 : 


function getCoverage() { 
var imgUrl, imgBounds; 


var e = documentgetElementById("CoverageIDget'"); 
var c_id = e.options[e.selectedIndex].text:; 


imgUrl = 'http://localhost:8080/geoserver/wes?service=WCS&version=2.0.1&Coverageld=" + cid + 
'&request=GetCoverage&format=image/png&'; 
imgBounds = new OpenLayers.Bounds(xminFullExt, yminFullExt, xmaxFullExt, ymaxFullExt); 


if (WCSimg) { 
map.removeLayer(WCSimg); 


// 用 于 WCS 的 图 像 图 层 

WCSimg = new OpenLayers.Layer.Image( 
'GetCoverage PNG', 
imgUrl, 
imgBounds, 
new OpenLayers.Size(10, 10). 
{isBaseLayer: false} 

六 


WCSimg.events.on({ 
loadstart: function () { 
document.getElementById("getCoverageBtn").disabled = true; 
document.getElementById("getCoverageImg").src = "ajax-loader.gif"; 
站 
loadend: function | { 
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document.getElementByld("getCoverageBtn").disabled = false; 
documentgetElementById("getCoverageImg ").src = "arrow.png"; 
D); 


map.addLayer( WCSimg); 


/ 将 地 图 缩放 到 覆盖 的 空间 范围 
map.zoomToExtent(imgBounds); 
} 
(4) 程序 运行 与 调试 。 
用 Firefox 等 浏览 器 直接 打开 GetCoverage_v2_0_1.html 文件 ， 然 后 通过 下 拉 框 选择 需要 
显示 的 覆盖 , 如 图 10.13 所 示 。 如果 程序 运行 有 错误 , 请 参看 下 载 文件 “Codes\Walkthrough15” 
文件 夹 中 的 GetCoverage_v2_0_1.html 文件 。 


Openlayers WCS GetCovera.. x | + 


二 veughib/GetCoveregevz0ihm “局 各 -9 


WCS GetCoverage (v2.0.1) 实 例 


可 使 用 牙医 [aare_aosaic 。v| | 轩 6etCoverage 


图 10.13 程序 运行 效果 
10.5 习 题 


(1) 在 互联 网 上 寻找 带 有 时 间 序 列 与 高 程序 列 的 多 维 栅 格 数据 ， 使 用 GeoServer 的 图 像 
镶嵌 插件 将 其 发 布 为 多 维 WCS 服务 。 
(2) 研究 如 何在 GeoServer 中 创建 覆盖 视图 。 
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从 本 章 可 以 学 习 到 : 

必 GeoServer 中 的 WPS 

必 WPS 的 操作 

加 使 用 WPS 创建 等 高 线 地 图 
必 在 OpenLayers 中 使 用 WPS 


第 11 章 Web 处理 服务 
a 


前 面 介绍 的 WMS、WFS 提供 了 地 图 绘制 与 空间 数据 服务 ， 在 地 理 信息 系统 中 ， 另 一 个 
重要 的 功能 是 地 理 处 理 ， 包 括 缓冲 区 分 析 、 空 间 变换 、 网 络 分 析 以 及 空间 插值 等 。 开 源 GIS 
或 商业 GIS 软件 都 包含 有 地 理 处 理 功 能 ， 在 前 面 的 内 容 中 介绍 了 使 用 QGIS 与 GDAL 执行 空 
间 坐 标 系 变换 等 功能 。 但 是 如 何 让 用 户 从 Web 浏览 器 中 运行 这 些 功 能 呢 ? 例如 希望 提供 如 下 
功能 : 用 户 在 Web 地 图 上 绘制 一 个 多 边 形 ， 然 后 计算 该 多 边 形 内 的 人 口 和 诊所 的 数量 。 这 样 
不 需要 每 个 用 户 都 安装 一 套 GIS 软件 ， 只 需要 在 服务 器 上 进行 空间 数据 处 理 ， 便 可 将 该 强大 
而 实用 的 空间 分 析 功 能 提供 给 广大 用 户 。 

同样 的 , 这 类 地 理 处 理 功能 也 都 可 以 通过 Web 服务 的 形式 对 外 提供 使 用 ,而 OGC 的 Web 
处 理 服 务 (WPS) 规范 就 是 一 种 用 于 在 Web 上 提供 和 执行 这 类 地 理 空间 处 理 的 国际 规范 ， 
用 于 在 不 同 的 平台 和 客户 端 之 间 以 一 种 开放 并 经 过 认可 的 方式 提供 地 理 处 理 服务 。 

本 章 将 介绍 WPS 及 其 服务 的 发 布 、 访 问 与 应 用 ， 并 通过 实践 的 方式 介绍 如 何 通过 该 服务 
实现 基于 Web 的 等 高 线 生 成 以 及 空间 数据 的 处 理 。 


11.1 GeoServer 中 的 WPS 


GeoServer 默认 并 不 提供 WPS 服务 , 需要 单独 安装 WPS 扩展 。 而且 该 扩展 包含 两 大 方面 
的 内 容 ， 一 方面 是 开源 的 Java 拓扑 套件 (Java Topology Suite， 简 写 为 JTS， 网 址 为 
http://tsusiatsoftware.net/jts/main.html》 提 供 的 地 理 处 理 ， 另 一 方面 是 GeoServer 开发 的 其 他 地 
理 处 理 。 


11.1.1 WPS 扩展 的 安装 


在 GeoServer 的 下 载 页 面 (http://geoserver.org/download/) 中 找到 对 应 版 本 的 GeoServer 
(本 书 使 用 的 是 2.6.2) ， 然 后 下 载 WPS 扩展 。 也 可 以 直接 使 用 下 载 文 件 “Resources\Tools” 

文件 夹 中 的 geoserver-2.6.2-wps-plugin.zip 文件 。 

将 ZIP 文件 解压 ， 并 加 其 中 所 有 的 文件 复制 到 GeoServer 安装 路 径 中 的 “WEB-INF/lib” 
文件 夹 中 ， 如 果 是 默认 安装 的 话 ， 目 录 如 下 : 

C:\Program Files\GeoServer 2.6.2\webapps\geoserver\WEB-INF\lib 
重新 启动 GeoServer， 便 可 在 GeoServer 的 Web 管理 页 面 的 服务 能 力 中 看 到 新 加 入 的 
WPS， 如 图 11.1 所 示 。 如 果 没 有 出 现 ， 说 明 安装 未 成 功 。 
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图 11.1 成 功 安装 WPS 扩展 后 GeoServer 的 服务 能 力 列表 
11.1.2 ”GeoServer 中 WPS 包含 的 类 型 


GeoServer 实现 了 两 大 类 的 地 理 处 理 , 一 类 是 Java 拓扑 套件 ， 另 一 类 是 GeoServer 自身 开 
发 的 。 
(1) Java 拓扑 套件 。 
Java 拓扑 套件 是 一 套用 于 处 理 几 何 要 素 拓扑 关系 的 函数 库 。 它 提供 了 完整 、 稳 定 、 可 靠 
的 基本 二 位 平面 线形 图 形 运 算 算 法 实现 ， 包 括 面积 计算 、 缓 冲 区 分 析 、 相 交 计 算 与 图 形 简化 
等 。 这 类 地 理 处 理 的 ID 以 JTS 开头 ， 例 如 JTS:area、JTS:boundary 等 。 
(2) GeoServer 自身 的 地 理 处 理 。 
这 类 地 理 处 理 是 GeoServer 特殊 开发 的 ,一般 只 能 用 于 GeoServer 中 , 例如 边界 计算 与 投 
影 变换 等 。 主 要 用 途 是 在 GeoServer 内 部 连接 WFS/WCS 服务 ， 用 于 读 写 数据 ， 并 不 是 WPS 
规范 的 一 部 分 。 这 类 地 理 处 理 的 ID 以 geo、gs、ras 与 vec 开头 , 例如 geo:polygonize、 gs:contour 
等 。 
虽然 GeoServer 提供 的 地 理 过 程 有 限 , 但 是 WPS 的 一 个 很 大 的 优点 是 可 将 这 些 地 理 过 程 
连接 起 来 ， 就 像 在 函数 中 调用 其 他 函数 一 样 。 对 于 WPS 一 个 地 理 处 理 可 以 使 用 其 他 地 理 处 理 
的 输出 作为 输入 ， 因 此 可 将 多 个 地 理 处 理 组 合 起 来 ， 形 成 一 个 强大 的 功能 。 
例如 ，GeoServer 中 自 带 了 如 下 两 个 图 层 : 


。 sf:roads: 包含 道路 信息 的 图 层 ; 
e。 sf:restricted: 表示 限制 区 域 的 图 层 。 


如 图 11.2 所 示 ， 底 图 是 DEM， 道 路 用 白 线 表示 ， 限 制 区域 是 用 虚线 绘制 的 多 边 形 ， 而 限 
制 区 域内 的 道路 用 深 色 表 示 。 现 在 要 计算 有 多 少 公 里 的 道路 穿越 了 保护 区 域 。 
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图 11.2 道路 网 与 限制 区 域 图 
为 了 计算 总 长 度 ， 需 要 使 用 到 GeoServer 中 内 建 的 如 下 一 些 WPS 地 理 处 理 : 


。 ”gs:IntersectionFeatureCollection， 将 道路 要 素 集 与 限制 区 域 要 素 集 进行 相交 计算 , 返回 
相交 要 素 集 ; 

。 gs:CollectGeometries， 从 相交 要 素 集中 获取 所 有 的 几何 对 象 ， 返 回 几何 对 象 集合 ; 

。 JTS:length， 计 算 所 有 几何 对 象 的 长 度 和 。 


11.2 WPS 的 操作 


在 开源 领域 中 ， 除 了 GeoServer 之 外 ，ZOO 开放 WPS 平台 (http://www.zoo-project.org/) 
与 PyWPS (http:/pywps.wald.intevation.org/) 也 可 提供 了 WPS 服务 。 在 商业 软件 领域 ，ESRI 
的 ArcGIS Server 可 将 ModelBuilder 中 的 模型 发 布 为 WPS 服务 。 

像 其 他 OGC 服务 一 样 ，WPS 也 提供 了 一 组 可 调用 的 操作 ， 分 别 是 GetCapabilities、 


DescribeProcess 与 Execute。 


11.2.1 GetCapabilities 操作 


GetCapabilities 请 求 返回 服务 的 基本 元 数据 。 对 于 本 地 安装 的 GeoServer， 可 使 用 如 下 请 
求 地址 获取 其 WPS 服务 的 元 数据 : 
http://localhost:8080/geoserver/ows?service=wps&version=1.0.0&request=GetCapabilities 
从 返回 的 响应 可 以 看 出 ， 主 要 包含 两 部 分 内 容 : 
(1) 该 WPS 服务 支持 的 操作 。 
(2) WPS 服务 中 提供 的 地 理 处 理 列表 ， 以 及 每 个 地 理 处 理 的 简单 描述 。 例 如 : 
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<wps:Process wps:processVersion="1.0.0"> 
<ows:Identifier>JTS:area</ows:Identifier> 
<ows:Title>Area</ows:Title> 
<ows:Abstract>Returns the area of a geometry, in the units of the geometry. Assumes a Cartesian plane, so 
this process is only recommended for non-geographic CRSes.</ows:Abstract> 
</wps:Process> 
<wps:Process wps:processVersion="1.0.0"> 
<ows:Identifier>JTS:boundary</ows:Identifier> 
<ows:Title>Boundary</ows:Title> 
<ows:Abstract>Returns a geometry boundary. For polygons, returns a linear ring or multi-linestring equal to 
the boundary of the polygon(s). For linestrings, returns a multipoint equal to the endpoints of the linestring. For 
points, returns an empty geometry collection.</ows:Abstract> 
</wps:Process> 


11.2.2 ”DescribeProcess 操作 


GetCapabilities 操作 得 到 了 可 执行 的 地 理 处 理 的 ID 及 其 简单 描述 ， 要 得 到 某 个 地 理 处 理 
的 详细 描述 ， 则 需要 使 用 DescribeProcess 操作 。 

如 果 对 JTS:buffer 感 兴趣 ， 则 可 构造 如 下 请 求 ， 获 取 其 详细 信息 : 

http://localhost:8080/geoserver/ows?service=wps&version=1.0.0&request=DescribeProcess&I 
dentifier=JTS:buffer 

WPS 的 地 理 处 理 描述 文档 中 主要 包含 了 执行 该 处 理 需 要 的 输入 参数 与 输出 结果 。 

输出 参数 在 DataInputs 中 。 例如 对 于 JTS:buffer 地 理 处 理 , 在 其 描述 文档 中 指出 了 要 求 以 
下 一 些 输入 参数 : 


<DataImputs> 
<Input minOccurs="1" maxOccurs="1"> 
<ows:Identifier>geom</ows:Identifier> 
<ows:Title>geom</ows:Title> 
<ows:Abstract>Input geometry</ows:Abstract> 
<ComplexData> 
<Default> 
<Format> 
<MimeType>text/xml; subtype=gml/3.1.1</MimeType> 
</Format> 
</Default> 
</ComplexData> 
</Input> 
<Input minOccurs="1" maxOccurs="1"> 
<ows:Identifier>distance</ows:Identifier> 
<ows:Title>distance</ows:Title> 
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<ows:Abstract>Distance to buffer the input geometry, in the units of the geometry</ows:Abstract> 
<LiteralData> 
<ows:DataType>xs:double</ows:DataType> 
<ows:AnyValue/> 
</LiteralData> 
</Input> 
<Input minOccurs="0" maxOccurs="1"> 
<ows:Jdentifier>quadrantSegments</ows:Identifier> 
<ows:Title>quadrantSegments</ows:Title> 
<LiteralData> 
<ows:DataType>xs:int</ows:DataType> 
<ows:AnyValue/> 
</LiteralData> 
</Input> 
<Input minOccurs="0" maxOccurs="1"> 
<ows:Identifier>capStyle</ows:Identifier> 
<ows:Title>capStyle</ows:Title> 
<LiteralData> 
<ows:AllowedValues> 
<ows:Value>Round</ows: Value> 
<ows:Value>Flat</ows:Value> 
<ows:Value>Square</ows:Value> 
</ows:AllowedValues> 
</LiteralData> 
</Input> 
</DataInputs> 


从 上 述 内 容 ， 可 以 看 到 JTS:buffer 需要 两 个 必 选 参数 ， 分 别 是 geom 要 进行 缓冲 区 计算 


的 几何 对 象 ) 与 distance〔 缓 冲 距 离 )， 还 可 以 包含 两 个 可 选 参 数 ， 分 别 是 quadrantSegments 


(表示 1/4 圆 所 使 用 的 线段 数 ) 与 capStyle〈 缓 冲 区 末端 的 形状 ) 。 


输出 信息 由 ProcessOutputs 部 分 指定 。 


11.2.3 ”Execute 操作 


URL, 或 是 带 XML 文档 的 POST 请 求 。 不 过 , 由 于 请 求 包含 比较 复杂 
方式 。 


Execute 操作 用 于 请 求 运行 一 个 由 WPS 服务 实现 的 地 理 处 理 。 请 求 可 以 是 一 个 GET 的 


的 结构 , 通常 使 用 POST 


下 面 是 缓冲 区 计算 的 Execute 操作 的 POST 请 求实 例 。 在 该 实例 中 ， 输 出 参数 geom 对 应 


的 是 一 点 对 象 (POINT(0 0)), 距离 distance 参数 指定 为 10,quadrantSegments 设置 为 1, capStyle 


设置 为 fat。ResponseForm 元 素 指定 了 输出 结果 格式 为 GML 3.1.1。 
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可 以 使 用 Fiddler 等 工具 来 发 送 POST 请 求 。 
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11.3 实践 17: 使 用 WPS 创建 等 高 线 地 图 


该 实践 将 演示 如 何 从 一 个 栅 格 DEM 图 层 创建 一 个 等 高 线 地 图 ， 展 示 了 两 种 不 同 的 方法 : 
(1) 创建 一 个 静态 的 矢量 等 高 线 图 层 ; 
(2) 利用 着 色 器 转换 动态 创建 等 高 线 样式 ， 从 而 用 等 高 线 的 方式 显示 高 程 数据 。 


11.3.1 创建 静态 等 高 线 地 图 


为 了 方便 ， 本 实践 直接 使 用 GeoServer 自 带 的 sf 工作 区 的 sfdem 图 层 ， 以 作为 原始 DEM 
数据 。 
(1) 查看 原始 数据 。 
登录 进入 GeoServer 的 Web 管理 页 面 ， 使 用 OpenLayer 预览 sfsfdem 图 层 ， 得 到 图 11.3 
所 示 的 栅 格 地 图 。 


Scale = 1 : 133K 606213.86719, 4916386.46484 
11.3 ”使 用 OpenLayer 预览 sf 工作 区 的 sfdem 图 层 
(2) 进入 WPS 请 求 构造 页 面 。 
在 GeoServer 的 Web 管理 页 面 的 左边 菜单 中 选择 “演示 ”, 进入 图 11.4 所 示 的 演示 程序 
列表 页 面 ， 在 其 中 选择 最 下 面 的 “WPS request builder”， 进 入 WPS 请 求 构造 页 面 。 
GeoServer 的 演示 程序 


Geoservef 的 演示 程序 集合 


® Demo requests Example requests for GeoServer (using the TestServiet). 
® SRS List List of al SRS known to GeoServer 

e Reprojection console Simple coordinate reprojection tool 

® WCS request bulder Step by step WCS GetCoverage request buider 

® WPS request bu 时 er Step by step WPS request buider 


图 11.4 ”GeoServer 演示 程序 列表 
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(3) 构造 WPS 请 求 。 

在 WPS 请 求 构造 页 面 中 ， 首 先 选择 “gs:Contour” 作 为 地 理 处 理 程序 ， 然 后 在 输入 栅 格 
图 层 中 选择 sfsfdem 作为 输入 图 层 ， 将 创建 等 高 线 所 使 用 值 设 置 为 1200， 在 是 否 需要 简化 文 
本 框 中 输入 true， 设 置 如 图 11.5 所 示 。 


WPS request builder 


Step by step WPS request builder. 


Choose process 
gs:Contour 中 


Computes contour Ines at specified ntervals or levels for the values n a raster. 


RASTER_LAYER [<] sz:sfdem 加 


band - Integer 
Name of band to use for values to be contoured 


levels - double(0-2147483647) 
Values of levels at which to generate contours 
1200 


interval - Double 
Interval between contour values (ignored f levels parameter is supplied) 


simplify - Boolean 
Indicates whether contour Ines are smpified 


true 


11.5 构造 创建 等 高 线 地 理 处 理 过 程 请 求 
最 后 在 该 页 面 的 输出 结果 部 分 设置 为 “application/zip”， 如 图 11.6。 


Process outputs 
result* - SimpleFeatureCollection 
Contour ine features. Contour level is in value attrbute. 


回 Generate [application/zip 


Authentication 


口 Authenticate (wil run the request as anonymous otherwise) 


Bxecute process ~ Cenarste Dl. from process inpats/outputs 


图 11.6 设置 输出 格式 


(4) 生成 请 求 XML 文档 。 
在 WPS 请 求 构造 页 面 的 最 底部 ， 单 击 “Generate XML from process inputs/outputs”， 将 
得 到 如 下 的 XML 文档 : 


<Ixml version="1.0" encoding="UTF-8"?><wps:Execute version="1.0.0" service="WPS" xmlns:xsi= 
"http://www.w3.org/2001/XMLSchema-instance" > 
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<ows:Identifier>gs:Contour</ows:Identifier> 
<wps:DataInputs> 
<wps:Input> 
<ows:Identifier>data</ows:Identifier> 
<wps:Reference mimeType="image/tiff"' xlink:hre 合 "http://geoserver/wcs" method="POST"> 
<wps:Body> 
<Wcs:GetCoverage service=" WCS" version= "1.1.1"> 
<ows:Identifier>sfsfdem</ows:Identifier> 
<wcs:DomainSubset> 
<gml:BoundingBox crs="http://www.opengis.net/gml/srs/epsg.xml#26713"> 
<ows:LowerCorner>589980.0 4913700.0</ows:LowerCorner> 
<ows:UpperCorner>609000.0 4928010.0</ows:UpperComer> 
</gml:BoundingBox> 
</wes:DomainSubset> 
<wcs:Output format="image/tiff"/> 
</wcs:GetCoverage> 
</wps:Body> 
</wps:Reference> 
</wps:Input> 
<wps:Input> 
<ows:Identifier>levels</ows:Identifier> 
<wps:Data> 
<wps:LiteralData>1200</wps:LiteralData> 
</wps:Data> 
</wps:Input> 
<wps:Input> 
<ows:Identifier>simplify</ows:Identifier> 
<wps:Data> 
<wps:LiteralData>true</wps:LiteralData> 
</wps:Data> 
</wps:Input> 
</wps:DataInputs> 
<wps:ResponseForm> 
<wps:RawDataOutput mimeType="application/zip"> 
<ows:Identifier>result</ows:Identifier> 
</wps:RawDataOutput> 
</wps:ResponseForm> 
</wps:Execute> 


(5) 修改 请 求 XML 文档 。 
由 于 我 们 需要 的 是 高 程 每 隔 100 米 就 创建 一 条 等 高 线 , 然而 在 WPS 请 求 构造 器 中 设置 参 
数 时 ， 并 不 能 自动 根据 输入 的 多 个 值 而 生成 多 个 输入 参数 ， 因 此 需要 我 们 手工 加 入 。 
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在 上 述 的 XML 文档 的 <wps:DataInputs> 与 </wps:DataInputs> 之 间 ， 加 入 其 他 高 程 值 作为 
输入 参数 ， 加 入 内 容 如 下 : 


<wps:Input> 
<ows:Identifier>levels</ows:Identifier> 
<wps:Data> 
<wps:LiteralData>1300</wps:LiteralData> 
</wps:Data> 
</wps:Input> 
<wps:Input> 
<ows:Identifier>levels</ows:Identifier> 
<wps:Data> 
<wps:Literal Data>1400</wps:LiteralData> 
</wps:Data> 
</wps:Input> 
<wps:Input> 
<ows:Identifier>levels</ows:Identifier> 
<wps:Data> 
<wps:LiteralData>1500</wps:LiteralData> 
</wps:Data> 
</wps:Input> 
<wps:Input> 
<ows:Identifier>levels</ows:Identifier> 
<wps:Data> 
<wps:Literal Data>1600</wps:LiteralData> 
</wps:Data> 
</wps:Input> 
<wps:Input> 
<ows:Identifier>levels</ows:Identifier> 
<wps:Data> 
<wps:Literal Data>1700</wps:LiteralData> 
</wps:Data> 
</wps:Input> 


这 就 是 需要 发 送 到 服务 器 的 POST 请 求 的 内 容 。 
(6) Fiddler 工具 安装 。 
为 了 将 上 述 POST 请 求 发 送 到 GeoServer 服务 器 , 执行 地 理 处 理 操作 , 需要 使 用 其 他 工具 。 
本 书 选择 使 用 Fiddler。 从 下 载 文件 的 *Resources\Tools ”文件 夹 中 复制 fiddler-4-4-9-6-en-win.exe 
文件 ， 然 后 双击 安装 Fiddler。 
(7) 利用 Fiddler 工具 发 送 POST 请 求 。 
运行 Fiddler, 在 其 窗口 的 右上 部 单 击 “Composer” 按 钮 ， 进 入 HTTP 请 求 构造 器 选项 卡 。 
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在 该 选项 卡 中 , 将 请 求 方式 设置 为 POST, 请 求 地 址 设置 为 http://localhost:8080/geoserver/wps， 
并 将 上 述 修改 后 的 XML 请 求 文档 内 容 复制 到 Request Body 中 ， 如 图 11.7 所 示 。 最 后 单 击 
“Execute” 按 钮 ， 向 服务 器 发 送 请 求 。 

© Fiddler Web Debugger - -En 


Ele Edk Buiee Jook Ven Hep Fodor 本 Geotdoe 
栖 Win8 Config 加 二 Replay X- Ge 昌 Steam 茹 Decode 


Lplond fi 
0 recsdng -UF 371 cwpaixeaite Verson "1.0 0 aervice WPS xnine A 
pgm ContoF <lonericentier> 


Dorerdbret> 
rtdourdrgpor cs htip: ume opengs retigrljs sensg oni#2671T > 
“owt owerC ormer > $2930 .0 物 1J70.0 <jone ewerComer> 
ove powCerer E000 0 928010,0<joneUpperConer> 
eriEoundngBex> 
REDonantbrety 


隔 captmng 三 川 Pocezoes 
11.7 使 用 Fiddler 工具 发 送 POST 请 求 
(8) 获取 返回 结果 。 
发 送 请 求 之 后 ， 在 Fiddler 窗口 的 左边 就 会 列 出 该 请 求 。 高 亮 选择 该 请 求 ， 然 后 选择 File 
菜单 中 的 Save->Response->Response Body， 将 请 求 响应 结果 保存 为 result.zip。 该 压缩 文件 中 


包含 矢量 等 高 线 sfdem 的 Shapefile 文件 。 
可 使 用 QGIS 打开 该 Shapefile 文件 ， 得 到 图 11.8 所 示 的 等 高 线 地 图 。 


11.8 ”静态 生成 的 等 高 线 矢量 数据 


11.3.2 ”动态 创建 等 高 线 


在 前 面 演 示 了 如 何 利 用 WPS 中 的 地 理 处 理 ， 从 规则 格 网 DEM 数据 获得 矢量 的 等 高 线 。 
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当前 一 个 发 展 前 沿 是 直接 在 样式 中 应 用 地 理 处 理 ， 通 过 着 色 器 转换 ， 动 态 地 将 数据 显示 为 地 
理 处 理 程序 处 理 后 的 效果 。 

(1) 创建 样式 文件 的 基本 架构 。 

新 建 一 个 文本 文件 ， 将 其 命名 为 contour_dem.sld， 在 该 文件 中 加 入 如 下 样式 文件 的 基本 
框架 内 容 : 


<?xml version="1.0" encoding="ISO-8859-1"?> 
<StyledLayerDescriptor version="1.0.0"> 
<NamedLayer> 
<Name>contour dem</Name> 
<UserStyle> 
<Title>Contour DEM</Title> 
<Abstract>Extracts contours from DEM</Abstract> 
<FeatureTypeStyle> 
</FeatureTypeStyle> 
</UserStyle> 
</NamedLayer> 
</StyledLayerDescriptor> 


(2) 加 入 着 色 器 转换 程序 。 

着 色 器 转换 是 通过 增加 一 个 Transformation 元 素 实 现 的 。 在 该 元 素 中 , 指定 转换 程序 的 名 
称 以 及 该 转换 需要 的 参数 。 本 实践 中 使 用 gs:Contour 转换 程序 。 

在 <FeatureTypeStyle> 与 </FeatureTypeStyle> 之 间 加 入 如 下 内 容 ， 实 现 着 色 器 转换 : 


<Transformation> 
<ogc:Function name="gs:Contour"> 

<ogc:Function name="parameter"> 
<ogc:Literal>data</ogc:Literal> 

</ogc:Function> 

<ogc:Function name="parameter"> 
<ogc:Literal>levels</ogc:Literal> 
<ogc:Literal>1100</ogc:Literal> 
<ogc:Literal>1200</ogc:Literal> 
<ogc:Literal>1300</ogc:Literal> 
<ogc:Literal>1400</ogc:Literal> 
<ogc:Literal>1500</ogc:Literal> 
<ogc:Literal>1600</ogc:Literal> 
<ogc:Literal>1700</ogc:Literal> 
<ogc:Literal>1800</ogc:Literal> 
<ogc:Literal>1900</ogc:Literal> 
<ogc:Literal>2000</ogc:Literal> 


</ogc:Function> 
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</ogc:Function> 
</Transformation> 


从 上 面 的 代码 可 以 看 出 ，Transformation 元 素 中 使 用 的 是 OGC 过 滤 函 数 的 语法 。 该 元 素 
的 内 容 是 一 个 指定 了 着 色 器 转换 程序 名 称 的 <ogc:Function>。 转 换 程序 可 能 需要 接受 一 些 参 
数 ， 这 些 参数 有 些 是 必 选 的 ， 有 些 是 可 选 的 。 参 数 以 “名 称 / 值 ”对 的 方式 提供 。 每 个 参数 的 
名 称 与 值 是 通过 另 一 个 <ogc:Function name="parameter"> 来 提供 的 ， 其 中 第 一 个 <ogc:Literal> 
包含 的 是 参数 的 名 称 ， 接 下 来 的 是 参数 的 值 。 在 上 面 的 代码 中 ，gs:Contour 是 转换 程序 ，data 
与 levels 分 别 是 两 个 参数 。 

(3) 加 入 等 高 线 显示 样式 。 

上 面 的 着 色 器 转换 只 负责 将 规则 格 网 的 DEM 转换 为 矢量 等 高 线 , 还 需要 加 入 等 高 线 显示 
样式 。 在 上 面 的 代码 后 面 ， 加 入 如 下 内 容 : 


<Rule> 
<Name>rulel</Name> 
<Title>Contour Line</Title> 
<LineSymbolizer> 
<Stroke> 
<CssParameter name="stroke">#000000</CssParameter> 
<CssParameter name="stroke-width">0.4</CssParameter> 
</Stroke> 
</LineSymbolizer> 
</Rule> 


(4) 加 入 另 一 样式 区 分 不 同等 高 线 。 

上 面 的 代码 使 得 所 有 的 等 高 线 都 使 用 同一 较 细 的 黑 线 来 表示 。 但 是 当 许 多 线 都 使 用 同等 
宽度 同样 颜色 表示 时 ， 很 难 区 分 它们 。 因 此 接 下 来 需要 加 入 另 一 个 样式 规则 ， 将 高 程 值 为 300 
倍数 的 等 高 线 用 更 粗 的 线 表 示 。 而 这 需要 使 用 正 EERemainder 过 滤 函 数 。 

在 上 面 的 代码 下 面 ， 加 入 如 下 内 容 ， 实 现 上 述 描述 功能 : 


<Rule> 

<Name>rule 2</Name> 

<Title>Contour Line (300)</Title> 

<ogc:Filter> 

<ogc:PropertyIsEqualTo> 
<ogc:Function name="IEEERemainder"> 
<ogc:Function name="int2ddouble"> 
<ogc:PropertyName>value</ogc:PropertyName> 
</ogc:Function> 
<ogc:Function name="parseDouble"> 
<ogc:Literal>300.0</ogc:Literal> 

</ogc:Function> 
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(5) 加 入 等 高 线 高 程 值 标注 。 

一 个 好 的 地 形 图 应 该 有 高 程 注 记 。 由 于 对 等 高 线 我 们 使 用 了 两 种 样式 ， 因 此 对 于 标注 最 
好 也 使 用 不 同类 型 的 标注 。 

在 上 面 的 代码 下 面 加 入 如 下 内 容 ， 实 现 等 高 线 的 高 程 标 注 : 


</Halo> 
<Fill> 
<CssParameter name="fill">#662200</CssParameter> 
</Fil> 
<Priority>2000</Priority> 
<VendorOption name="followLine">true</VendorOption> 
<VendorOption name="repeat">300</VendorOption> 
<VendorOption name="maxDisplacement">50</VendorOption> 
<VendorOption name="maxAngleDelta">30</VendorOption> 
<VendorOption name="spaceAround">20</VendorOption> 
</TextSymbolizer> 
</Rule> 
<Rule> 
<Name>rule 4</Name> 
<Title>Label (300)</Title> 
<ogc:Filter> 
<ogc:PropertyIsEqualTo> 
<ogc:Function name="IEEERemainder"> 
<ogc:Function name="int2ddouble"> 
<ogc:PropertyName>value</ogc:PropertyName> 
</ogc:Function> 
<ogc:Function name="parseDouble"> 
<ogc:Literal>300.0</ogc:Literal> 
</ogc:Function> 
</ogc:Function> 
<ogc:Literal>0</ogc:Literal> 
</ogc:PropertyISEqualTo> 
</ogc:Filter> 
<TextSymbolizer> 
<Label> 
<ogc:Function name="round"> 
<ogc:PropertyName>value</ogc:PropertyName> 
</ogc:Function> 
</Label> 
<Fon> 
<CssParameter name="font-family">Arial</CssParameter> 
<CssParameter name="font-weight">Bold</CssParameter> 
<CssParameter name="font-size">10</CssParameter> 
</Font> 
<LabelPlacement> 
<LinePlacement/> 


</LabelPlacement> 
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<Halo> 
<Radius> 
<ogc:Literal>2</ogc:Literal> 
</Radius> 
<Fil> 
<CssParameter name="fill">#FFFFFF</CssParameter> 
<CssParameter name="fill-opacity">0.6</CssParameter> 
<Fill> 
</Halo> 
<Fill> 
<CssParameter name="fill">#662200</CssParameter> 
</Fil> 
<Priority>3000</Priority> 
<VendorOption name="followLine">true</VendorOption> 
<VendorOption name="repeat">300</VendorOption> 
<VendorOption name="maxDisplacement">50</VendorOption> 
<VendorOption name="maxAngleDelta">30</VendorOption> 
<VendorOption name="space Around">20</VendorOption> 
</TextSymbolizer> 
</Rule> 


(6) 将 contour_dem.sld 上 传 到 GeoServer 中 。 
利用 GeoServer 的 Web 管理 页 面 ， 新 建 一 个 名 为 contour_dem 的 样式 ， 将 其 样式 文件 指 
定 为 contour_dem.sld。 
(7) 设置 图 层 的 样式 。 
按照 前 面 实践 介绍 的 方式 ， 在 GeoServer 的 Web 管理 页 面 中 单 击 “ 图 层 ”， 在 图 层 列表 
中 选择 sftdem， 进 入 编辑 图 层 页 面 。 在 该 页 面 的 “发 布 ”选项 卡 中 ， 将 sf 工作 区 中 的 sfdem 
图 层 的 默认 样式 设置 为 contour_dem， 并 将 dem 样式 添加 到 “selected styles” 中 ， 如 图 11.9 
所 示 。 


Queryable 


口 opaque 
Default style 


contour_de= > 


Additional Styles 


Available Styles Selected Styles 


polyeonwithstyledlabel ~ ten 
pophatch contour_den 
population Bl 


图 11.9 设置 图 层 样式 
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(8) 图 层 预览 。 
在 GeoServer 的 Web 管理 页 面 中 ， 使 用 OpenLayer 预览 sfsfdem 图 层 。 不 过 为 了 同时 显 
示 规 则 格 网 的 DEM 以 及 等 高 线 ， 需 要 对 URL 修改 两 个 参数 。 


e lalyer=sf:stdem,sfdem 
e styles=dem, 


修改 后 的 URL 如 下 : 


http://localhost:8080/geoserver/sf/wms?service=WMS&version=1.1.0&request=Get Map&layers=sf:sfdem,sf:s 
fdem&zstyles=dem,&bbox=589980.0,4913700.0,609000.0,4928010.0&width=512&height=385&srs=EPSG:26713& 


format=application/openlayers 
上 述 URL 得 到 图 11.10 所 示 的 同时 以 两 种 样式 显示 的 同一 数字 高 程 模型 数据 。 底 层 是 规 
则 格 网 的 DEM， 上 层 是 用 地 理 处 理 程序 动态 生成 的 等 高 线 。 


| 国 OpenLayers map preview x 【十 


专 国 6713aformat=epplicatiovopeneyes ~ C| 时 人 关 ”四 三 


Scale =1: 133K 607142.57813, 4917017.98828 
Click on the map to get feature info 


图 11.10 在 样式 中 利用 WPS 动态 创建 等 高 线 


如 果 没 有 得 到 正确 的 显示 结果 ， 可 参考 下 载 文件 “Codes\Walkthrough17” 文 件 夹 中 的 
contour_dem.sld 文件 。 


11.4 实践 18: 在 OpenLayers 中 使 用 WPS 


在 本 实践 中 ， 将 演示 如 何 使 用 OpenLayers 调用 WPS 服务 ， 执 行 相交 与 缓冲 区 计算 两 个 
地 理 处 理 。 


229 


Web GIS 原理 与 应 用 开发 


11.4.1 页 面 设 计 


新 建 一 个 名 为 Walkthrough18 的 文件 夹 , 在 其 中 加 入 名 为 WpsClient.html 的 文件 。 该 文件 
的 内 容 如 下 : 


11.4.2 ”代码 实现 


所 有 的 JavaScript 代码 放 在 了 WpsClient.js。 
(1) 新 建 一 个 名 为 WpsClient.js 的 文件 。 
(2) 地 图 初始 化 。 
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在 WpsClientjs 文件 中 加 入 如 下 代码 ， 实 现 地 图 初始 化 工作 : 


var map, client, intersect buffer; 


function init() { 
map = new OpenLayers.Map('map', { 
allOverlays: true, 
center: [114, 16], 
Zoom: 4、 
layers: [new OpenLayers.Layer. Vector()] 
D); 
| 


(3) 加 入 两 个 要 素 。 
在 init0 继 续 加 入 如 下 代码 ， 实 现在 地 图 中 加 入 指定 坐标 的 两 个 要 素 : 
Var features = [new OpenLayers.Feature. Vector(OpenLayers.Geometry.from WKT( 


'LINESTRING(117 22,112 18,118 13, 115 8) 


Ml; 
var geometry = OpenLayers.Geometry.fromWKT( 

'POLYGON((110 20,120 20,120 10,110 10,110 20).(112 17,118 18,118 16,112 15,112 17)) 
六 


map.baseLayer.addFeatures(features); 
map.baseLayer.addFeatures([new OpenLayers.Feature.Vector(geometry)]); 


(4) 创建 OpenLayers.WPSClient 类 的 实例 。 
要 访问 WPS 服务 中 的 地 理 处 理 ， 首 先 需要 WPS 服务 的 URL 作为 参数 初始 化 一 
OpenLayers.WPSClient 实例 。 
在 init0 继 续 加 入 如 下 代码 ， 实 现实 例 化 一 个 WPS 客户 端 对 象 : 


client = new OpenLayers. WPSClient({ 

servers: { 

opengeo: 'http://localhost:8080/geoserver/wps' 

上 
D; 
(5) 创建 用 于 相交 计算 的 地 理 处 理 程序 。 
相交 计算 的 地 理 处 理 程序 是 JTS:intersection， 其 输入 参数 可 以 是 一 个 要 素 或 一 个 几何 对 

象 ， 或 者 是 它们 的 集合 。 

在 init0) 继 续 加 入 如 下 代码 ， 实 现 创建 相交 计算 的 地 理 处 理 程序 ， 并 设置 其 参数 : 


intersect = client.getProcess('‘opengeo', 'JTS:intersection"); 
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(6) 创建 用 于 缓冲 区 计算 的 地 理 处 理 程序 。 
缓冲 区 计算 的 地 理 处 理 程序 是 JTS:buffer。 我 们 把 相交 计算 得 到 的 结果 作为 其 输入 参数 。 
若 要 执行 地 理 处 理 ， 则 需要 调用 execute 函数 。 
在 init0 继 续 加 入 如 下 代码 ， 执 行 缓冲 区 计算 。 在 成 功 执行 返回 结果 ， 将 结果 添加 到 地 图 中 。 


(7) 运行 与 调试 程序 。 
用 Firefox 等 浏览 器 直接 打开 WpsClient.html 文件 ， 便 可 得 到 图 11.11 所 示 的 两 个 要 素 ， 
以 及 两 要 素 相 交 后 得 到 的 两 条 线段 的 缓冲 区 图 形 。 


11.11 程序 运行 结果 
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程序 代码 位 于 下 载 文件 的 “Codes\Walkthrough18” 文 件 夹 中 。 
11.5 习 题 


(1) 在 样式 中 ， 利 用 gs:PolygonExtraction 地 理 处 理 程序 ， 动 态 从 sfsfdem 图 层 中 提取 
1300~1500 米 、1500~1700 米 以 及 1700~1900 米 的 等 高 线 ， 并 将 它们 绘制 为 多 边 形 ， 结 果 如 图 
11.12 所 示 。 参 考 代 码 见 下 载 文件 的 “Codes\Assignmentll\ polygons_dem.sld” 文 件 。 


8、 de 


11.12 ”提取 等 高 线 并 显示 为 多 边 形 


(2) 在 样式 中 ， 利 用 gs:RasterAsPointCollection 地 理 处 理 程序 ， 动 态 从 sfsfdem 图 层 中 
提取 每 个 格 网 的 点 ， 并 显示 其 对 应 的 高 程 值 ， 结 果 如 图 11.13 所 示 。 参 考 代码 见 下 载 文件 的 
“Codes\Assignmentll point_dem.sld” 文 件 。 


11.13 ”显示 规则 格 网 DEM 中 每 个 格 网 的 高 程 值 
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(3) 将 下 载 文件 “Data\Major_World_Cities” 文 件 夹 中 的 Major_World_Cities.shp 文件 发 
布 为 服务 。 该 数据 包含 了 世界 主要 城市 的 点 数据 ， 其 中 POPULATION 字段 包含 了 人 口 数 量 
字段 ， 通 过 在 样式 中 利用 gs:Heatmap 地 理 处 理 ， 将 该 图 层 动态 显示 为 一 栅 格 形式 的 热度 图 。 
结果 如 图 11.14 所 示 。 参 考 代 码 见 下 载 文 件 “Codes\Assignmentl1\heatmap.sld” 文 件 。 


11.14 ”将 点 图 层 动态 显示 为 热度 图 


(4) 将 下 载 文 件 “Data\Certified Vernal Pools” 文 件 夹 中 的 GISDATA_CVP_PT.shp 文件 
发 布 为 服务 。 该 数据 包含 了 美国 麻 省 州 政府 认证 的 季节 性 水 池 点 数据 。 如 果 使 用 默认 的 点 符 
号 来 样式 化 ， 结 果 如 图 11.15 所 示 。 由 于 点 太 多 ， 在 小 比例 尺 时 ， 许 多 点 聚集 在 了 一 起 。 通 
过 在 样式 中 应 用 gs:PointStacker 地 理 处 理 ， 在 小 比例 尺 时 ， 将 周围 点 合并 显示 为 一 个 点 ， 并 
显示 合并 的 点 的 数目 ， 如 图 11.16 所 示 。 参考 代码 见 下 载 文 件 “Codes\Assignment11\Clustered. 
sld” 文 件 。 


图 11.15 使 用 默认 点 符号 样式 化 水 池 点 数据 
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图 11.16 ”使 用 gs:PointStacker 地 理 处 理 在 小 比例 尺 时 显示 点 的 数量 
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从 本 章 可 以 学 习 到 : 

多 开放 数据 的 方式 

学 VGI 与 众 包 项 目 

必 OpenStreetMap 及 其 开放 数据 的 应 用 
* 地 图 混搭 应 用 

志 从 OpenStreetMap 获取 源 数 据 

s 城市 天 气 预 报 系统 开发 


第 和 2 章 开放 数据 获取 与 地 图 混搭 应 用 = 


对 于 一 个 GIS 系统 或 Web GIS 应 用 ， 只 有 当 其 中 的 数据 有 用 时 ， 该 系统 才 有 用 。 正 如 
GIS 系统 中 包含 了 商业 软件 与 开源 软件 ， 在 空间 数据 方面 ， 同 样 存在 商业 数据 与 开放 数据 的 
区 别 。 软 件 是 由 代码 和 数据 共同 组 成 的 ，“ 开 源 ” 指 的 只 是 开放 代码 ， 并 不 包括 数据 。 但 当 
开放 代码 已 经 成 为 共识 和 现实 的 时 候 ， 新 一 代 的 创新 者 自然 又 将 眼光 投向 了 数据 。 虽 然 同 为 
软件 的 一 部 分 ， 但 开放 数据 和 开放 代码 却 大 不 相同 。 开 放 代码 面向 的 对 象 仅仅 是 程序 员 ， 也 
就 是 说 ， 它 停留 在 技术 的 层面 ; 但 数据 的 开放 ， 其 涉及 面 却 广 得 多 ， 它 不 仅 和 技术 人 员 相 关 ， 
还 与 数据 的 来 源 、 性 质 以 及 过 去 和 未 来 的 使 用 人 员 都 息息相关 。 

本 章 将 介绍 “开放 数据 ”的 不 同 含义 ， 以 及 创建 一 个 在 各 种 项 目 中 使 用 最 多 的 开放 数据 
一 一 OpenStreetMap， 并 将 介绍 混搭 应 用 及 其 开发 方法 。 


12.1 开放 数据 的 方式 


最 近 ，“ 开 放 数据 ”似乎 无 处 不 在 。 这 个 词 也 常常 与 “政务 公开 ”“ 众 包 ”“ 透 明 政 府 ” 
和 “自由 和 开放 源码 软件 ”等 一 同 出 现 。 那 么 ， 哪 些 数据 算是 “开放 ”数据 呢 ? 正如 在 第 1 
章 介绍 的 ， 不 同 的 组 织 甚至 是 商业 软件 公司 ， 有 时 会 处 于 某 种 考虑 ， 也 会 使 用 “开源 ”这 个 
术语 。 因 此 ， 在 听 到 “开放 数据 ”这 个 术语 时 ， 应 该 考虑 到 该 术语 存在 许多 细微 的 差别 。 

根据 数据 可 访问 与 使 用 性 ， 可 从 以 下 方面 来 划分 不 同类 型 的 数据 : 

(1) 公众 不 能 以 任何 格式 查看 或 下 载 数 据 。 

(2) 只 能 用 静态 的 方式 ， 例 如 纸 质地 图 或 PDF 分 发 数据 。 

(3) 任何 人 都 可 以 通过 一 个 Web GIS 系统 查看 数据 ， 但 不 能 下 载 数据 。 

(4) 任何 人 都 可 以 通过 Web 服务 方式 访问 数据 ， 将 其 集成 到 自己 的 Web GIS 系统 中 
或 用 桌面 GIS 系统 查看 ， 但 不 能 下 载 完 整 的 数据 集 。 

(5) 数据 可 免费 以 商业 数据 格式 下 载 。 

(6) 数据 可 免费 以 开放 格式 下 载 。 

当然 ， 组 织 或 个 人 在 宣称 自己 的 数据 是 开放 时 ， 不 会 像 上 面 那样 直 白 ， 需 要 我 们 仔细 甄 
别 。 例 如 : 

(1) 某 个 人 宣称 : “我 的 数据 是 开放 的 ， 因 为 我 让 你 看 到 了 数据 ”， 然 而 由 于 许可 、 安 
全 、 技 术 或 人 力 资源 的 限制 ， 数 据 本 身 可 能 不 提供 下 载 。 

(2) 某 一 “开放 数据 门户 ”可 能 会 提供 数据 集 免 费 下 载 ， 但 在 门户 网 站 中 的 一 些 数 据 格 
式 可 能 只 能 使 用 商业 软件 才 可 读 可 用 。 

最 开放 的 数据 类 型 是 那些 允许 完整 下 载 数据 、 再 利用 和 修改 在 开放 格式 。 然 而 ， 数 据 开 
放 其 他 级 别 毕 竟 比 根本 看 不 见 数据 要 有 用 。 


12.1.1 开放 数据 许可 


即使 数据 可 免费 用 开放 格式 下 载 ， 该 数据 仍然 可 能 受 许可 的 限制 。 针 对 数据 使 用 的 系统 
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类 型 (个 人 、 非 商业 、 商 业 等 ) 以 及 哪 种 归属 ， 存 在 许多 类 型 的 开放 数据 许可 。 许 可 也 可 以 
规定 数据 修改 的 类 型 ， 特 别 是 当 修 改 后 的 数据 集 再 分 发 时 。 

这 些 类 型 的 许可 包括 知识 共享 (Creative Commons)、 开 放 式 数据 库 许 可 证 (Open Database 
License) 、 开 放 政府 许可 (Open Government License) 与 公众 领域 (Public Domain) 等 。《 许 
可 开放 数据 : 实用 指南 》 (http://discovery.ac.uk/files/pdf/Licensing Open Data A_ Practical 
Guide.pdf) 详细 介绍 了 相关 概念 以 及 实践 指南 。 


12.1.2 ”商业 软件 与 开放 数据 


开源 软件 在 使 用 开放 数据 格式 方面 很 突出 ， 但 是 开源 软件 并 不 是 创建 、 共 享 与 使 用 开放 
数据 的 唯一 选择 。 例 如 ESRI 也 花费 了 大 量 的 资金 与 时 间 来 研究 如 何在 ArcGIS 在 线 
(http://server.arcgisonline.com/ArcGIS/rest/services/) 以 及 ArcGIS 门户 产品 中 发 现 并 下 载 开放 
数据 。 他 们 认为 ， 如 果 商 业 数 据 库 可 以 很 方便 地 让 公众 使 用 KML 与 CSV 等 流行 开放 格式 下 
载 ， 那 么 政府 部 门 用 户 更 愿意 使 用 商业 软件 来 维护 他 们 的 数据 。 
除了 ArcGIS 在 线 ，http://services.arcgis.com 也 包含 了 大 量 的 开放 数据 。 例 如 在 第 11 章 习 
题 中 利用 的 世界 主要 城市 数据 , 就 来 源 于 http://services.arcgis.com/oKgs2tbjK6zwTdvi/ ArcGIS/ 
rest/ services/ Major World_Cities。 进 入 该 服务 的 查询 页 面 ， 将 查询 条 件 即 “Where ”文本 框 设 
置 为 “1=1”， 表 示 获 取 所 有 数据 ， 输 出 字段 文本 框 中 设置 “NAME,COUNTRY， 
POPULATION,CAPITAL”， 输 出 格式 设置 为 “GEOJSON”， 如 图 12.1 所 示 。 
- 5 En 


吉 Query Major World Cii- x \+ 


€ 图 zericsargscomakeszttjximwidiAcas 7C| 易 人 四 | 三 


Where: 1 

Object IDs: 

Time: 

Input Geometry: 

Geometry Type: Eavelope 
Input spatal Reference: 


Spatial Relationship: Tateraects 

Dstance: 

Units: Meters ~ 

Out Felds: NAME, COUNTRY, POFULATION, CAPITAL 
Return Geometry: 加 True Ofalse 

Max Allowable Offset: 


Geometry Precision; 


图 12.1 从 ArcGIS 服务 中 查询 开放 数据 


输入 参数 之 后 ， 在 页 面 底部 单 击 “Query(GET)” 按 钮 ， 得 到 图 12.2 所 示 的 以 GeoJSON 
格式 表示 的 地 理 数据 。 
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融 httpy/serv_jsonatoken= x 十 


站 EEC 可 蕊 


“type”:“FeatureCollection ， 
ers” : 


“type” : “name”, 
“properties” : 


“name” : “EPS6:3857” 


“features” : [ 


“type” : “Feature”, 
“geometry”: 


“type” : “Point”, 
“coordinates” : [ 
14560306. 0338794，3986163, 88626561 


“properties” : { 
“NAME”: “Kita Kyushu”, 
“COUNTRY” : “Japan”, 
“POPULATION”: 1525000, 
“CAPITAL” : “N” 


12.2 ”通过 查询 得 到 的 GeoJSON 格式 的 开放 数据 


可 将 该 内 容 保存 为 一 个 文件 ， 然 后 使 用 QGIS 等 软件 打开 ， 便 可 另存 为 Shapefile 等 其 他 
格式 。 


12.2 VGI 与 众 包 项 目 


如 果 没 有 足够 的 钱 或 手段 来 购买 所 需要 的 GIS 数据 ， 或 者 类 似 的 数据 根本 就 不 存在 ， 那 
么 则 需要 自己 收集 数据 。 如 果 目 标 是 将 数据 公开 ， 与 公众 分 享 所 产生 的 数据 ， 那 么 则 可 以 考 
虑 在 数据 收集 工作 时 争取 公众 参与 。 VGI (Volunteered Geographic Information， 自 发 地 理 信 
息 ) 和 众 包 是 在 收集 GIS 数据 时 争取 公众 或 非 领域 专家 参与 的 两 个 概念 。 


12.2.1 VGI 


VGI 在 地 理 信息 科学 领域 已 经 成 为 一 个 炙手可热 的 名 词 .该 概念 由 M.F. Goodchild 于 2007 
年 提出 ， 是 指 由 大 众 自愿 创建 、 编 辑 、 管 理 、 维 护 的 地 理 信息 。 这 种 数据 是 由 市 民 作 为 传 感 
器 ,来 收集 有 关 周 围 世界 的 信息 ,然后 常 通过 一 个 已 简化 的 不 需要 专门 特殊 培训 的 用 户 界面 ， 
将 数据 录入 到 一 个 集中 的 GIS 数据 库 。 此 概念 是 用 户 创建 内 容 (User-generated content， 简 写 
为 UGC) 、Web 2.0 等 思想 与 地 理 信 息 系统 相 结合 的 产物 ， 反 映 了 互联 网 时 代 地 理 信息 新 的 
获取 与 应 用 方式 。 


Openstreetmap、Google Map Maker 都 是 以 采集 与 管理 自发 地 理 信息 为 基本 模式 的 网 络 协 
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作 项 目 ， 它 们 提供 基础 地 图 ， 并 允许 用 户 创建 新 的 地 理 数据 或 更 新 已 有 数据 。 此 外 ， 各 国政 
府 也 都 在 评估 建立 “市 民 举报 ”的 应 用 程序 的 可 能 性 ， 该 应 该 程序 允许 任何 人 上 传 有 关 城 市 
中 的 违法 违规 信息 ， 以 引起 地 方 当 局 的 注意 。 

VGI 被 认为 是 公众 参与 的 地 理 信 息 系统 在 互联 网 下 的 发 展 产物 ， 它 提供 了 普通 人 操作 和 
使 用 地 理 数据 的 权利 ， 同 时 为 维护 动态 更 新 的 开放 地 理 数 据 库 提供 了 可 行 的 方案 。 


12.2.2 众 包 


众 包 是 使 用 公众 的 力量 来 收集 数据 量 巨 大 、 一 致 的 数据 ， 或 者 使 用 其 他 方式 采集 则 要 花 
费 巨大 的 数据 。 例 如 编写 一 部 百科 全 书 ， 包 含有 使 用 250 种 语言 的 3000 万 篇 文章 ， 如 果 不 采 
用 众 包 的 方式 , 试想 需要 雇佣 多 少 人 ? 而 维基 百科 Wikipedia 网 站 则 仅仅 通过 众 包 的 方式 , 实 
现 了 该 伟大 创举 。 其 他 众 包 应 用 包括 寻找 丢失 的 人 或 车 辆 的 遥感 图 像 应 用 

Cedition.cnn.com/2014/03/11/us/malaysia-airlines-plane-crowdsourcing-search/) 、 根 据 船 舶 日 志 
记录 旧 天 气 以 便 创 造 气候 数据 库 项 目 (www.oldweather.org/) ， 以 及 根据 人 口 普查 创建 可 搜索 
的 家 谱 索 引 项 目 (https://familysearch.org/indexing/) 等 。 中 国 众 包 案例 包括 人 人 猪头 、 微 差事 、 
易 到 用 车 等 。 

众 包 最 适用 的 是 那些 机 器 不 能 实现 而 需要 人 类 认 知 元 素 的 任务 。 亚 马 逊 甚至 还 通过 它 的 
Mechanical Turk (aws.amazon.com/mturk/) 的 服务 提供 众 包 服务 。 通 过 该 网 站 ， 通 常 可 以 用 很 
少 的 费用 来 雇佣 一 大 批 不 知名 的 个 人 来 完成 某 一 任务 。 

众 包 的 概念 很 符合 VGI， 特 别 是 对 于 要 求 在 很 短 时 间 内 收集 大 量 数据 。 但 是 ， 并 不 是 所 
有 VGI 项 目 都 使 用 众 包 。 一 些 VGI 项 目 侧重 于 从 小 样本 人 和 群 或 领域 专家 收集 信息 。 


12.3 ”OpenStreetMap 及 其 开放 数据 的 应 用 


OpenStreetMap 〈OSM) 是 通过 VGI 与 众 包 方式 创建 的 全 球 电子 地 图 数据 库 。OSM 由 非 
营利 的 OpenStreetMap 基金 会 支持 。OSM 中 的 数据 在 开发 许可 (www.openstreetmap.org/ 
copyright) 下 ， 可 以 免费 查询 、 下 载 与 修改 。 

OSM 的 运行 模式 与 维基 百科 类 似 ， 几 乎 所 有 的 功能 都 可 以 由 用 户 社区 的 任何 成 员 编辑 。 
OSM 在 2004 年 7 月 由 Steve Coast 创立 , 在 2013 年 年 初 注册 用 户 就 已 经 超过 100 万 。 虽 然 只 
有 很 少 一 部 分 人 频繁 地 编辑 地 图 ， 不 过 在 某 地 地 点 ， 其 数据 的 详细 程度 与 准确 程度 ， 完 全 不 
逊 于 政府 部 门 与 商业 公司 的 “权威 ”数据 。 在 西欧 和 美国 的 一 些 地 区 尤其 如 此 。 图 12.3 展示 
的 是 美国 宾夕法尼亚 州 州 立 大 学 校园 ， 从 中 可 看 出 OSM 包含 许多 复杂 的 要 素 。 
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图 12.3 OSM 地 图 样 例 


OSM 最 初 流行 于 那些 数据 不 能 从 地 方 政府 免费 获取 但 GIS 社区 却 很 繁荣 的 地 方 。 例 如 在 
21 世纪 初 ， 英 国 陆军 测量 局 的 数据 需要 付费 购买 ， 那 么 OSM 则 迅速 成 长 为 一 个 有 吸引 力 的 
免费 蔡 代 品 。 对 于 那些 政府 愿意 免费 共享 他 们 数据 的 地 方 ，OSM 通常 直接 使 用 这 些 数据 。 例 
如 ， 由 于 将 美国 人 口 普查 TIGER 街道 数据 批量 上 传 到 OSM 中 ， 因 此 在 美国 有 相当 深入 的 道 
路 覆盖 数据 。 


12.3.1 OpenStreetMap 数据 模式 


在 OSM 中 贡献 要 素 时 ， 虽 然 仍然 使 用 的 是 点 、 线 、 面 几何 图 形 ， 但 是 OSM 却 使 用 了 与 
普通 GIS 很 不 一 样 的 数据 模型 。 

OSM 采用 的 是 准 拓扑 的 数据 模型 ， 其 中 最 基本 的 是 Node、Way 与 Relation 这 3 个 对 象 ， 
三 者 关系 如 图 12.4 所 示 。 


12.4 OSM 数据 模型 中 最 基本 的 3 个 对 象 及 其 关系 
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Node 表示 一 个 节点 ， 也 就 是 空间 中 的 点 ， 比 如 说 一 个 景点 或 者 山峰 ， 对 应 GIS 中 的 点 要 
素 。 它 是 OSM 数据 类 型 中 唯一 用 来 标识 位 置信 息 的 类 型 ，Way 与 Relation 都 依赖 于 Node。 
下 面 是 一 个 Node 的 例子 : 


<osm version="0.6" generator="OpenStreet Map server"> 
<node id="483034256" lat="55.9458449" lon="-3.2035477" version="1" 
changeset="2369219" user="spytfyre" uid="166957" visible="true" 
timestamp="2009-09-04T13:35:42Z"> 
<tag k="name" v= "The Blue Blazer" 亡 
<tag k="amenity" v="pub" /> 


</node> 
</osm> 
每 个 节点 除了 表示 唯一 标识 的 id 之 外 ， 至 少 还 需要 包含 经 度 和 纬度 两 个 属性 。 其 他 主要 
可 选 属性 包括 : 


(1) version: 表示 该 对 象 的 版 本 ; 

(2) changeset: 标识 变化 〈 即 由 同一 个 用 户 执行 的 批量 插入 /更 新 ) 的 版 本 号 ; 

(3) user: 提交 更 改 用 户 的 昵称 ; 

(4) uid: 提交 更 改 用 户 的 唯 -标识 id; 

(5) timestemp: 更 改 时 间 戳 ， 

(6) 其 他 任意 的 属性 信息 : 使 用 标签 (tag) 元 素来 增加 ， 该 元 素 中 使 用 “名 称 / 值 ”对 
的 方式 , k 表示 属性 的 名 称 , v 表示 属性 的 值 。 例 如 上 面 的 例子 中 , 该 要 素 包 括 name 与 amenity 
两 属性 ， 其 值 分 别 为 “The Blue Blazer” 与 “pub”。 

标签 元 素 中 的 属性 名 称 可 以 是 任意 的 , 但 是 有 一 个 标签 规范 (wiki.openstreetmap.org/wiki/ 
Map_Features) 规定 了 最 常用 的 要 素 属 性 名 称 。 

Way 表示 有 序 排列 的 节点 ， 以 折线 的 形式 呈现 ， 如 果 是 封闭 圈 的 话 ， 那 么 可 能 是 以 多 边 
形 的 方式 呈现 。 这 类 原始 数据 大 多 用 来 呈现 为 街道 、 河 流 或 一 个 区 块 ， 比 如 说 森林 、 公 园 、 
停车 场 或 者 是 一 片 湖泊 。 下 面 是 一 个 Way 的 例子 : 


<osm version="0.6" generator="OpenStreetMap server"> 

<way id="43157302" visible="true" timestamp="2009-10-26T10:45:09Z" 
Version="1" changeset="2954960" user="Ed Avis" uid="31257"> 
<nd ref="540653724" 亡 
<nd ref="25507043" /> 
<nd ref="107762" /> 
<nd ref="25507038" /> 
<nd ref="107759" /> 
<tag k="highway" v="primary" > 
<tag k="lcn ref" v="6a" 广 
<tag k="name" v="Parliament Street" /> 

</way> 
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</osm> 


其 中 nd 表示 一 个 节点 的 引用 ， 其 ref 指向 的 是 节点 的 id。 

Relation 表示 关系 ， 是 用 来 表示 各 个 原始 数据 (节点 与 节点 、 节 点 与 道路 、 道 路 与 道路 ) 
的 关系 ， 比 如 说 道路 与 道路 的 拐弯 限制 ， 一 条 道路 分 叉 出 来 的 各 种 小 道路 ， 或 者 一 个 区 域 中 
的 一 个 洞 等 。 下 面 是 一 个 Relation 的 例子 : 


<osm version="0.6" generator="OpenStreetMap server"> 
<relation id="113421" visible="true" timestamp="2009-11-03T10:08:27Z" 
Version="2" changeset="3023369" user="Jonathan Bennett" uid="5352"> 
<member type="node" ref="270186" role="via" /> 
<member type="way" ref="4418767" role="from" /> 
<member type="way" ref="4641665" role="to" /> 
<tag k="restriction" y="no_right_turn" /> 
<tag k="type" v="restriction" /> 
</relation> 
</osm> 


上 述 实例 表示 从 哪 条 道路 经 过 菜 个 节点 到 哪 条 道路 去 ， 并 指明 在 该 节点 处 禁止 右 拐 。 
12.3.2” OpenStreetMap 的 使 用 


OSM 最 基本 或 最 常用 的 使 用 方式 是 获取 其 地 图 切片 ， 将 其 作为 其 他 专题 图 层 的 基础 底 
图 ,以 这 种 方式 使 用 OSM 的 高 知名 度 的 网 站 包括 Foursquare、Craigslist 与 Wikipedia。 在 Google 
地 图 API 引入 潜在 费用 以 后 ， 很 多 网 络 开发 人 员 转 而 使 用 OSM 作为 基础 底 图 。 

从 技术 角度 来 说 ， 任 何人 都 可 以 使 用 类 似 Mapnik 的 泻 染 引擎 ， 将 OSM 数据 绘制 成 地 图 
切片 。 事 实 上 ， 本 书 的 第 5 章 的 实践 部 分 演示 了 如 何 实现 该 任务 。 图 12.5 显示 的 是 直接 使 用 
OpenStreetMap.org 中 的 地 图 时 ， 可 选择 的 基础 底 图 类 型 。 其 他 像 MapQuest 

(developer.mapquest.com/web/products/open/map) 与 Mapbox (www.mapbox.com/ data-platform ) 
等 公司 通过 Web 服务 的 方式 也 提供 了 OSM 地 图 。 


Map Layers 


二 Humanitarian 


4 ‘A pe > 


图 12.5 ”OpenStreetMap.org 提供 的 不 同类 型 的 基础 底 图 
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在 2010 年 海地 大 地 震 后 ，OSM 树立 了 一 个 让 非 政府 组 织 和 国际 组 织 合作 的 榜样 。 在 短 
短 两 天 内 ，OpenStreetMap 和 Crisis Commons 的 志愿 者 使 用 了 卫星 映像 在 OSM 完成 了 标记 海 
地 Port-au Price 区 域 的 道路 、 建 筑 物 和 避难 营 , 后 来 使 OSM 成 为 “最 齐全 的 海地 数字 地 图 ”。 
在 海地 灾情 过 后 , OSM 也 在 后 来 的 发 生 灾难 的 地 区 产生 了 重大 的 作用 。 马 利 (2013 年 1 月 ) 、 
菲律宾 的 海燕 (2013 年 11 月 ) ， 还 有 西非 的 埃 博 拉 病 毒 (2014 年 3 月 ) ， 再 次 显现 了 各 个 
不 同 的 国际 组 织 即 使 通过 互联 网 ， 也 能 从 OSM 地 图 中 来 帮助 人 道 主义 组 织 进行 援助 。 

此 外 ，OSM 有 一 个 最 大 的 优势 是 其 灵活 性 ， 通 过 已 经 存在 的 标签 以 及 基于 社区 的 标签 提 
议 机 制 ， 可 存储 任何 类 型 的 要 素 。 有 时 还 可 以 根据 要 素 的 子 类 型 来 创建 专门 的 专题 地 图 ， 例 
如 : 

(1) OpenCycleMap (www.opencyclemap.org) ， 专 门 用 于 绘制 自行 车 道 ; 

(2) OpenSkiMap (openskimap.org) ， 展 示 滑 雪 缆 车 和 滑 道 ; 

(3) Wheelmap (www.wheelmap.org) ， 用 以 浏览 和 标记 轮椅 无 障碍 地 点 ; 

(4) Philly Fresh Food Map (www.geovista.psu.edu/phillyfood) ， 显 示 在 美国 宾夕法尼亚 
州 费 城 城市 农业 资源 和 新 鲜 食 品 经 销 网 点 ， 如 图 12.6 所 示 。 


1. Selecta nelghborhood 
KAN 


2. Select food resources to display 


Farmers markets 


Food pantnes/Soup mkchens 


Gardens and tarms 


Compost 


3. Click an item on the map to see detalls 


ho sem currenty setected 


图 12.6 费城 农业 资源 和 新 鲜 食 品 经 销 网 点 分 布 专题 图 


在 这 些 地 图 中 ，OSM 充当 了 了 解 当 地 有 用 知识 的 可 自由 访问 的 数据 库 。 其 中 一 些 地 图 要 
素 为 社区 提供 了 很 大 的 价值 ， 但 是 这 些 地 区 往往 无 利 可 图 ， 因 此 商业 地 图 只 提供 了 很 少 的 信 
息 或 根本 就 没有 信息 。 为 了 避免 地 图 图 面 过 于 杂乱 , 在 默认 的 OSM 切片 地 图 中 并 没有 完全 显 
示 其 数据 库 中 的 所 有 类 型 的 要 素 ， 但 是 这 些 要素 对 于 那些 开发 人 员 往 往 很 珍贵 ， 他 们 可 从 中 
提取 自 定义 的 子 集 并 形成 专题 地 图 。 

要 记 住 的 是 , 正 是 因为 OSM 允许 免费 下 载 并 重新 利用 这 些 数据 , 才能 有 上 述 这 些 专 题 地 
图 。 从 OSM 中 提取 专题 地 图 的 网 站 ， 通 常 基于 OSM 的 查询 API， 称 为 XAPI。 该 API 通过 
Web 服务 提交 自 定义 的 标签 查询 。 相 比 下 载 某 地 区 整个 OSM 的 数据 集 ， 通 过 Web 服务 获取 
匹配 标签 的 要 素 要 实用 得 多 。 在 本 章 的 实践 中 将 介绍 XAPI 的 简单 使 用 。 
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12.4 地 图 混搭 应 用 


在 互联 网 进入 Web 2.0 时 代 后 ， 众 多 地 图 站 点 例如 谷歌 地 图 、 必 应 地 图 和 我 国 的 天 地 图 ， 
都 为 使 用 者 提供 了 可 供 调用 的 API 接口 ， 我 们 可 以 利用 这 些 API 接口 将 所 需 的 各 类 服务 整合 
起 来 ， 实 现 内 容 的 集成 。 这 就 是 地 图 混搭 应 用 。 


12.4.1 混搭 应 用 的 概念 


对 于 混搭 技术 , 目前 有 个 比较 统一 的 定义 : 混搭 是 通过 其 他 站 点 对 外 提供 API 接口 调用 ， 
来 为 特定 站 点 带 来 新 的 功能 或 增加 新 的 内 容 ， 即 从 多 个 分 散 的 站 点 获取 信息 源 ， 组 合成 新 的 
网 络 应 用 的 一 种 站 点 模式 。 混 搭 的 产品 形式 有 很 多 种 ， 既 可 以 是 一 家 服务 商 把 自己 的 多 个 产 
品 或 多 个 功能 模块 通过 各 自 的 API 接口 在 自己 的 平台 实现 统一 的 服务 整合 ， 也 可 以 是 服务 商 
搭建 一 个 通用 的 平台 ， 将 其 他 服务 商 的 服务 转化 成 统一 的 服务 接口 ， 供 用 户 在 平台 上 自由 组 
合 调用 。 
在 地 理 信息 混搭 方面 有 着 许多 应 用 。 特 别 是 因为 Google 等 公司 推出 属于 自己 的 API， 降 
低 以 往 开发 电子 地 图 的 门槛 , 让 许多 以 Google 地 图 等 电子 地 图 为 显示 底 图 的 应 用 网 站 如 雨 后 
春笋 般 诞 生 。Programmableweb 网 站 上 列 出 了 超过 1400 个 地 理 信 息 融 入 式 应 用 
(www.programmableweb.com/tag/mapping) 。 最 为 成 功 的 是 24 岁 的 Adrian Holovaty， 他 把 美 
国 艺 加 哥 警 察 局 的 犯罪 统计 信息 覆盖 在 Google 地 图 上 (www.chicagocrime.org) 。 这 样 ， 人 
们 在 地 图 上 就 可 以 精确 查 明 30 天 的 时 段 内 发 生性 侵犯 犯罪 的 地 点 。 在 地 图 上 , 每 一 个 犯罪 地 
点 都 用 一 个 图 钉 符 号 标 出 ， 芝 加 哥 人 能 迅速 获知 应 该 避 开 哪些 危险 的 火车 站 和 街区 。 社 区 活 
动 家 JamesCappleman 对 Holovaty 的 芝加哥 犯罪 网 印象 深刻 ， 因 为 这 样 居民 们 就 不 会 再 轻信 
那些 街区 安全 的 说 法 了 。 而 包括 旧金山 在 内 的 其 他 一 些 城市 希望 Holovaty 也 能 为 他 们 开发 犯 
罪 定位 网 站 。 同 样 ， 佛 罗 里 达 性 犯罪 网 (MapSexOffender.com) 把 Google 地 图 和 被 宣判 的 性 
犯罪 者 的 资料 结合 起 来 。 访问 者 可 以 调 阅 所 在 社区 地 图 ， 单 击 图 标 查看 每 一 个 犯罪 者 的 姓名 、 
最 新 地 址 和 照片 。 而 美国 的 驾车 者 如 果 要 找 最 便宜 的 加 油 站 ， 只 需要 单 击 结合 了 Google 地 图 
和 汽油 伙伴 网 站 〈Gas-buddy.com) 加 油 站 价格 的 数据 库 的 链接 就 可 以 了 。 同 样 的 ， 购 房 者 可 
以 利用 Google 的 地 图 , 精确 查 明 适 合 的 房 源 地 点 。 以 搜索 房 源 的 Housingmaps.com 网 站 为 例 ， 
当 Google 地 图 刚 发 布 , 电脑 动画 工程 师 Paul Rademacher 随即 开发 了 Housingmaps.com, 他 将 
Google 地 图 和 全 美 所 有 在 Craigslist 上 公布 的 公寓 名 单 对 接 。 此 外 还 有 提供 飞机 航班 即时 信息 
的 fboweb.com， 结 合 天 气 信息 的 Weather Underground 等 。 


12.4.2 ”网 络 资源 


构建 混搭 应 用 最 重要 的 是 有 好 的 创意 ， 此 外 找到 相应 的 网 络 资源 也 是 必 不 可 少 的 条 件 。 
可 以 从 www.programmableweb.com/tag/mapping 寻找 相应 的 API 与 数据 。 这 里 简单 介绍 几 个 
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重要 的 常用 网 络 资源 。 
12.4.2.1 GeoNames 


GeoNames 是 一 个 免费 的 全 球 地 理 数据 库 。GeoNames 的 目标 是 把 各 种 来 源 的 免费 数据 进 
行 集成 并 制作 成 一 个 数据 库 或 一 系列 的 Web 服务 。GeoNames 的 用 户 包括 Microsoft Popfly、 
Slide.com、LinedIn 和 Tagzania。 
GeoNames 地 名 辞典 包含 了 650 万 个 地 点 、 将 近 200 种 语言 的 850 万 个 地 名 和 200 万 种 别 
名 。 所 有 特征 均 分 门 别 类 地 放 入 9 个 特征 类 ， 这 些 特征 类 再 细 分 为 645 个 特性 代码 。 地 理 信 
息 还 详细 到 坐标 、 行 政 区 划 、 邮 政 编码 、 人 口 、 海 拔 和 时 区 。GeoNames 的 数据 收集 自 (美国 ) 
国家 测绘 机 构 、 国 家 统计 署 、 国 家 邮政 局 ， 还 有 美国 陆军 。 数 据 可 通过 一 系列 Web 服务 和 数 
据 库 导出 免费 使 用 。 并 且 GeoNames 采用 了 维基 百科 的 风格 允许 用 户 纠 正 数 据 和 添加 新 的 地 
名 。2007 年 4 月 ，GeoNames 报告 宣称 已 有 15000 次 数据 库 下 载 和 3000 万 次 Web 服务 查询 。 
GeoNames 回答 了 诸如 此 类 的 问题 : 这 个 地 方 在 哪儿 ? 它 的 坐标 是 多 少 ? 它 属 于 哪个 地 区 
或 哪个 省 ? 有 哪些 城市 或 地 址 靠近 这 个 给 定 的 经 纬度 ? GeoNames 的 用 户 一 般 利 用 这 些 数据 
或 服务 计划 旅游 、 房 地 产 、 在 线 社区 、 商 店 定位 、 交 通 工具 追踪 、 地 址 确认 或 关于 地 理 地 图 
方面 的 应 用 。 
也 可 以 通过 其 丰富 的 Web 服务 来 使 用 GeoNames。 它 是 基于 REST 风格 设计 的 ， 所 以 可 
以 使 用 任何 用 来 从 URL 请 求 数据 的 代码 。 在 GeoNames 上 所 能 执行 的 查询 的 种 类 很 多 。 如 下 
所 示 的 是 其 中 一 些 例子 : 
(1) 找 到 某 个 邮编 所 代表 位 置 的 周边 地 区 , 按 国 家 返回 (返回 XML 文件 或 JSON 提要 ) 。 
(2) 找到 接近 给 定 纬度 /经 度 的 邮编 (返回 XML 文件 ) 。 
(3) 找 到 具有 给 定 地 理 特征 的 子 集 (例如 , 某 个 国家 的 省 、 该 省 管辖 的 各 地 区 , 返回 XML 
文件 或 JSON 提要 ) 。 
(4) 找到 接近 给 定 纬度 /经 度 、 邮 编 或 地 名 的 相关 维基 百科 (Wikipedia) 文章 (返回 XML 
文件 或 JSON 提要 ) 。 
(5) 找到 某 个 国家 的 所 有 邻 国 〈 返 回 XML 文件 或 JSON 提要 ) 。 
(6) 找到 由 4 个 纬度 /经 度 对 所 确定 的 地 理 范围 内 的 全 部 气象 台 及 其 最 新 的 气象 观测 ( 返 
回 XML 文件 ) 。 
(7) 获得 给 定 纬 度 /经 度 所 在 的 时 区 (返回 XML 文件 或 JSON 提要 ) 。 
(8) 获 得 代表 陆地 地 区 的 纬度 /经 度 所 对 应 的 以 米 为 单位 的 海拔 (返回 XML 文件 或 JSON 
提要 ) 。 


12.4.2.2 Flickr 的 相册 服务 
Flickr 相册 服务 是 Web 2.0 应 用 方式 的 绝 佳 例子 , 它 提 供 了 有 具备 社会 性 网 络 的 相片 共享 服 


务 , 让 用 户 图 片 的 上 载 、 组 织 和 查找 都 变 得 异常 简单 。 对 于 开发 者 ，Flickr 还 提供 了 读 写 照片 
数据 的 公共 API， 可 以 通过 HTTP 的 API 请 求 发 送 来 调用 Flickr 提供 的 服务 。 
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Flickr 集合 了 借 由 用 户 间 的 关系 彼此 相互 连接 的 数字 图 像 ， 图 像 可 依 其 内 容 彼 此 产生 关 
系 。 图片 上传 者 可 自己 定义 该 相片 的 关键 字 ， 也 就 是 “标签 (Tags) ”， 如 此 一 来 搜索 者 可 
很 快 地 找到 想 要 的 相片 ， 例 如 指定 拍摄 地 点 或 照片 的 主题 ， 而 创作 者 也 能 很 快 了 解 相 同 标签 
下 有 哪些 由 其 他 人 所 分 享 的 照片 。Flickr 也 会 挑选 出 最 受 欢迎 的 标签 名 单 ， 缩短 搜索 相片 的 时 
间 。Flickr 被 普遍 认为 是 有 效 使 用 分 众 分 类 法 〈Floksonomy) 的 范 型 。 此 外 ，Flickr 也 是 第 一 
个 使 用 标签 云 (Tag Cloud) 的 网 站 。Flickr 也 让 用 户 能 将 照片 编 入 “照片 集 (Sets) ”， 或 是 
将 有 相同 标题 开头 的 照片 结 成 组 群 。 然 而 照片 集 比 传统 的 文件 夹 分 类 模式 更 有 弹性 ， 因 为 一 
张 照 片 可 被 归 类 到 多 个 照片 集中 , 或 是 仅 分 至 一 个 照片 集中 , 或 是 完全 不 属于 任何 的 照片 集 。 

可 使 用 如 下 格式 的 网 址 ， 从 Fickr 中 得 到 带 有 地 理 标签 的 相片 ( 即 GeoRSS 提要 ) : 

http://www.flickr.com/services/feeds/geo/ 两 个 字母 的 国家 代码 /城市 名 称 

例如 ， 要 得 到 来 自 中 国 的 GeoRSS 提要 ， 只 需要 在 网 址 栏 中 输入 如 下 地 址 : 

http://www .flickr.com/services/feeds/geo/cn 

而 要 得 到 北京 的 相片 的 GeoRSS 提要 ， 可 使 用 如 下 网 址 : 

http://www.flickr.com/services/feeds/geo/cn/Beijing 

默认 返回 的 是 GeoRSS 格式 的 提要 。GeoRSS 提供 了 一 种 在 RSS (或 者 Atom) 种 子 里 通 
过 特定 的 编码 来 包含 地 理 参考 信息 的 方法 。 和 嵌入 GeoRSS 非常 简单 ,仅仅 在 每 个 条 目 中 增加 

-个 类 似 <georss:point>45.256 -71.92</georss:point> 这 样 的 元 素 就 行 了 ， 这 里 使 用 的 是 简易 
GeoRSS 格式 , 如 果 需 要 复杂 完整 的 编码 格式 , 可 以 选择 支持 更 多 特性 的 GeoRSS-GML 格式 。 
这 两 种 GeoRSS 格式 都 支持 基本 的 地 理 特征 (点 、 线 、 边 框 和 多 边 形 ) 。 和 KML 一样， 商 
业 化 的 地 图 API 和 开源 地 图 API 都 支持 GeoRSS， 并 且 主 要 作为 导入 数据 的 格式 使 用 。 
GeoRSS 许诺 对 整合 内 容 的 会 有 更 好 的 支持 。 

当然 ， 对 于 使 用 JavaScript 来 访问 ， 最 简单 的 方式 是 使 用 JSON 格式 。 要 得 到 JSON 格式 
的 提要 ， 只 需要 在 参数 中 加 入 格式 定义 即 可 ， 例 如 下 面 的 地 址 可 得 到 全 球 范 围 内 以 JSON 格 
式 返 回 的 相片 提要 : 

http://www .flickr.com/services/feeds/geo?format=json 

可 在 地 址 中 加 入 标签 定义 来 缩小 搜索 范围 ， 例 如 : 

http://www .flickr.com/services/feeds/geo?format=json&tags=technology 


12.4.2.3 ”Yahool! 天 气 


Yahoo! 天 气 提供 了 未 来 5 天 的 天 气 预报 , 以 及 每 天 的 详细 天 气 。 在 JavaScript 中 使 用 Yahoo! 
天 气 服务 一 种 最 简单 的 方式 是 使 用 YQL 查询 其 weather.forecast 表 。 

YQL (Yahoo! Query Language) 是 Yahoo! 发 布 的 一 种 支持 对 互联 网 上 的 数据 进行 查询 、 
过 滤 、 连 接 ， 且 类 似 SQL 语法 的 简单 语言 。 用 YQL 官方 的 话 来 说 ， 有 了 YQL， 开 发 人 员 只 
需要 使 用 一 种 简单 的 查询 语言 即 可 访问 和 操控 互联 网 上 丰富 的 数据 ， 而 不 再 需要 反复 学 习 使 
用 各 种 各 样 的 API。YQL 为 我 们 提供 丰富 、 实 时 的 方法 来 操控 互联 网 上 任意 可 访问 的 API。 

YQL 就 像 一 个 超大 的 数据 库 。 从 理论 上 讲 ， 这 个 数据 库 可 以 包含 整个 互联 网 上 的 信息 。 
无 论 是 要 基于 各 种 API 操 作 数据 ， 还 是 从 feed 源 (如 RSS、XML、ATOM) 获取 数据 ， 甚 至 
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是 从 指定 的 HTML 页 面 上 抓 取 结果 ,所 需要 的 就 是 使 用 YQL 这 种 类 似 SQL 的 简单 查询 语言 : 

SELECT something FROM table name WHERE some field=some_value 

YQL 能 够 以 规范 的 格式 (XML/JSON) 将 结果 返回 。 

Yahool 同时 向 开发 者 提供 了 一 个 可 视 化 的 web 控制 台 ， 网 址 为 
https://developer.yahoo.com/yql/console/， 让 我 们 在 使 用 和 调试 YQL 的 过 程 中 更 加 高 效 便捷 。 
例如 要 通过 名 称 查询 其 对 应 的 地 理 坐 标 ， 类 似 于 前 面 介绍 的 GeoNames， 便 可 以 在 Web 控制 
台 的 “YOUR YQL STATEMENT” 中 输入 类 似 如 下 的 语句 : 

Select * from geo.places where text='Beijing China' 

然后 单 击 “Test” 按 钮 ， 便 可 在 控制 台 的 “Formatted View” 中 显示 查询 结果 ， 如 图 12.7 
所 示 。 

| 


加 YQL Console: select "fr x 


€ 3 CC Bhttps://developer.yahoo.com/yql/console/?q= 3%20*%20from%20f 六 | 号 国 三 
Q Soarch Ta YOUR YQL STATEMENT k 加 
accessbiity » Select*from geo.places where text='Beijing 

~ China' 
ty 
XML JSON Diagnostics Devug 国 
a en | | 
» amee 
Fomatted View TreeVew View™ geo places 
i | 
i ees eing, | 
| 
apiyee 
| 
» appdb | 
THERESTOUERY H 
apple | 
ee =- https-/query yahocapis.com/1/public/yql?q=select%20"%20rom%209eo placasy 一 


图 12.7 利用 YQL 控制 台 调试 YQL 

此 外 ， 还 可 在 控制 台 的 中 央 的 底部 看 到 对 应 的 REST 查询 URL。 例 如 对 于 上 面 的 查询 语 
句 ， 其 REST URL 为 : 

https://query.yahooapis.com/v 1/public/yql?q=select%20*%20from%20geo.places%20where% 
20text%3D'Beijing%20China'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswi 
thkeys&callback= 

也 就 是 说 REST URL 是 由 http://query.yahooapis.com/v1/public/yql? 加 查询 语句 组 成 的 。 

有 了 该 REST URL， 我 们 便 可 在 应 用 程序 中 利用 ArcGIS API for JavaScipt 的 esri/request， 
或 Dojo 的 dojo/request/script.get, 或 jQuery 的 $. ajax 来 调用 , 即 可 得 到 如 同 在 “Formatted View” 
中 显示 的 查询 结果 。 

在 YQL 控制 台 页 面 的 最 右 部 分 列 出 了 Yahoo! 提 供 的 所 有 可 查询 的 表 。 当 然 我 们 也 可 以 
输入 “show tables” 查 询 语句 来 获取 该 列表 。 当 鼠标 移动 到 某 个 表 时 ， 会 出 现 一 名 为 “dese” 
的 按钮 ， 单 击 该 按钮 ， 便 可 查看 该 表 的 描述 。 

由 于 Yahoo! 提 供 了 多 方法 的 查询 表 ， 通 过 组 合 查询 ， 可 得 到 一 些 复杂 的 结果 。 例 如 要 在 
页 面 中 显示 用 户 当 前 所 在 城市 的 天 气 预报 ， 可 按 下 面 的 方式 来 实现 : 
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(1) 利用 HTML5 中 的 geolocation 来 得 到 设备 的 地 理 位 置 ; 
(2) 构造 一 个 YQL 语句 来 查询 geo.placefinder 表 ， 得 到 该 地 理 位 置 所 在 城市 的 woeid 
(Where On Earth Identifier) ; 
(3) 利用 该 woeid， 构 造 一 个 查询 语句 ， 查 询 weather.forecast， 便 可 得 到 今后 5 天 的 天 
气 预报 。 


12.5 “实践 19: 从 OpenStreetMap 获取 源 数 据 


从 OpenStreetMap 中 获取 数据 要 比 往 里 面 添加 数据 更 困难 。 当 往 OSM 中 增加 数据 时 ， 可 
以 使 用 许多 不 同 的 编辑 器 ， 也 可 以 使 用 任何 标签 ， 当 然 需要 尽量 遵守 标签 规范 。 

当 从 OSM 中 获取 数据 时 ， 需 要 考虑 如 下 问题 : 

(1) 只 获取 需要 的 标签 数据 ; 
(2) 获取 需要 的 数据 格式 ; 
(3) 不 要 获取 过 太 多 的 数据 ， 以 免 服 务 器 与 自己 难以 承担 。 

此 外 ， 另 一 个 突出 的 问题 是 从 OSM 返回 的 XML 数据 使 用 的 是 它 自己 的 结构 ， 许 多 GIS 
应 用 程序 不 能 直接 读 取 。 因 此 还 需要 将 该 XML 转换 为 其 他 格式 。 

有 多 种 机 制 下 载 OSM 数据 。 应 对 上 述 这 些 挑战 最 简单 的 机 制 是 , 提供 一 种 方法 来 过 滤 想 
要 的 标签 ， 允 许 指定 输出 格式 ， 并 允许 指定 限制 请 求 数据 的 一 个 地 理 边界 框 ， 这 样 就 不 会 取 
得 过 多 数据 。 

也 有 许多 方式 来 下 载 OSM 数据 。 其 中 一 个 用 户 最 友好 的 具有 图 形 界面 的 方式 是 通过 
BBBike.org 服务 器 ， 网 站 地 址 是 http://extract.bbbike.org， 如 图 12.8 所 示 。 通过 该 基于 Web 的 
工具 ， 可 以 交互 式 地 绘制 一 矩形 框 ， 并 指定 希望 的 输出 格式 。 稍 过 一 会 儿 ， 该 网 站 会 将 一 个 
链接 地 址 通过 邮件 的 方式 发 送 给 你 ， 通 过 该 链接 便 可 下 载 数据 。 
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12.8 通过 BBBike.org 服务 器 下 载 OSM 数据 
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在 本 实践 的 第 一 部 分 中 ， 我 们 将 介绍 如 何 使 用 QGIS 来 下 载 OSM 数据 ， 该 方式 比 通过 
BBBike.org 服务 器 更 直接 ， 而 且 对 选择 标签 具有 更 大 的 灵活 性 。 在 第 二 部 分 将 介绍 如 何 使 用 
XAPI 来 下 载 数 据 。 


12.5.1 使 用 QGIS 下 载 数据 


本 实践 以 从 OpenStreetMap 中 下 载 德国 波恩 城市 的 建筑 物 为 例 ， 来 演示 如 何 使 用 QGIS 
下 载 数 据 。 

(1) 下 载 数据 。 

启动 QGIS， 选 择 “ 矢 量 ” 菜 单 中 的 “开放 街道 图 ” 子 菜单 中 的 “Download Data” 命 令 ， 
打开 图 12.9 所 示 的 “下 载 开放 街道 图 数据 ”对 话 框 。 在 该 对 话 框 中 ， 手 动 输入 要 下 载 数据 范 
围 的 经 纬度 。 然 后 设置 输出 文件 的 路 径 与 文件 名 。 最 后 单 击 “ 确 定 ” 按 钮 ， 下 载 数据 。 


# 下 载 开放 街道 图 数据 EE 
到 国 
从 地 图 视图 
从 图 层 区 
手动 
本 而 
or 7 
责 现 
输出 文件 


图 12.9 通过 下 载 开放 街道 数据 对 话 框 下 载 数 据 


(2) 从 .osm 文件 中 导入 数据 。 

选择 “矢量 ”菜单 中 的 “开放 街道 图 ” 子 菜单 中 的 “Import Topology from XML ”命令 ， 

打开 “导入 开放 街道 图 ”对 话 框 ， 并 按照 图 12.10 填写 对 话 框 。 最 后 单 击 “确定 ”按钮 ， 将 

数据 导入 到 一 个 SpatiaLite 数据 库 中 。 接 下 来 还 需要 从 该 数据 库 中 提取 指定 标签 的 几何 图 形 ， 
创建 有 用 的 图 层 。 

四 导入 开放 街道 图 机 


输入 ma 文件 (om) 
[CMat Dora/bonn om ][ 


输出 spatiaLite DB 文件 
CDatayBona/bomn om th 


3 导 入 之 后 8 健 连 接 (SpatisLite) 
连接 名 称 bonn 


“| Eee 关闭 
图 12.10 导入 开放 街道 图 对 话 框 
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(3) 输出 图 层 。 
选择 “矢量 ”菜单 中 的 “开放 街道 图 ” 子 菜单 中 的 “Export Topology to SpatiaLite” 命 令 ， 
打开 “将 开放 街道 图 拓扑 结构 导出 到 SpatiaLite” 对 话 框 。 输 入 数据 库 文件 设置 为 第 二 步 创建 
的 bonn.osm.db， 导 出 类 型 为 多 边 形 ， 导 出 标签 包含 building、addr:street、addr:housenumber、 
source 以 及 amenity 这 5 个 ， 如 图 12.11 所 示 。 最 后 单 击 “ 确 定 ” 按 钮 。 


六 将 开放 街 进 图 拓扑 结构 导出 到 spatialite 。? 匡 下 
辆 入 数据 库 文件 


Crat Dorm/benn om 王 


导出 类 型 
点 (节点 ) 线 集 (总 是 开口 。 二 条 过 有 6 (总 是 闭合 ) 
和 4 名称 
om prlyecns 
导 册 标签 
从 政 据 库 载 入 
标 入 计数 向 
W building 86536 
addrctreet 43764 
% addrhouserumber 43210 
addrcity 43039 
addripostcode 42664 
addrcountry 39077 
highway 37376 
rame 15149 E 
Source 13298 日 


区 完 或 后 艇 入 到 视图 中 民 ) 


1 0% 确定 关闭 


图 12.11 导出 图 层 
(4) 查看 数据 。 
通过 “将 开放 街道 图 拓扑 结构 导出 到 SpatiaLite” 对 话 框 ， 将 指定 标签 数据 导出 完成 后 ， 


将 在 QGIS 地 图 中 显示 bonn_polygons 图 层 ， 其 中 包含 了 数据 库 中 的 所 有 多 边 形 ， 如 图 12.12 
所 示 。 

了 QGIS 2.6.1-Brighton -°° 
项目 盈 坊 本 人 国 人 国 ED 设 委 信 ) 揪 件 G) 矢量 (0) 者 迄 人 E) 盐 揪 阵 ) 网 兴 们 ?recerring » 
口罩 罩 电 已 及 [VORAANDPDA: QD 


/ LL nj = 


tf: Ti 0 1 [ET 


图 12.12 导出 的 多 边 形 图 层 
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(5) 通过 表达 式 选择 要 素 。 

在 图 层 管理 器 中 ,用 鼠标 右键 单 击 bonn_polygons 图 层 ,选择 其 右键 菜单 的 * Open Attribute 
Table” 命 令 ， 打 开 属性 表 对 话 框 。 在 该 对 话 框 的 项 部 选择 “使 用 表达 式 选 择 要 素 ” 按 钮 ， 打 
开 “Select by expression-bonn-palygons” 对 话 框 ， 如 图 12.13 所 示 。 在 该 对 话 框 的 “表达 式 ” 
框 中 ， 输 入 如 下 查询 条 件 : 


"building" !='NULL' AND "building" != no' 


Select by expression - bonn_polygons ? 
Selected furctior hely 


ED | 


EE 


se)séa bia) (ed, 


12.13 ”使 用 表达 式 选 择 要素 

该 表达 式 过 滤 了 不 是 建筑 物 的 要 素 。 如 果 感 兴趣 的 是 其 他 类 型 的 要 素 ， 则 需要 创建 只 选 
择 需 要 标签 的 表达 式 。 

然后 单 击 “ 选 择 ” 按 钮 。 这 时 在 地 图 中 可 以 看 到 所 有 建筑 物 都 被 选择 了 。 

(6) 将 选择 要 素 另 存 为 图 层 。 

在 图 层 管理 器 中 ， 用 鼠标 右键 单 击 bonn_polygons 图 层 ， 选 择 其 右键 菜单 中 的 “另存 为 ” 
命令 , 打开 “矢量 图 层 另存 为 ”对 话 框 。 在 该 对 话 框 中 输入 另存 文件 的 路 径 与 文件 名 ， 并 选 
中 “Save only selected features” 复 选 框 ， 如 图 12.14 所 示 。 最 后 单 击 “ 确 定 ” 按 钮 。 


# 矢 昌 网 层 另存 为 团 > 


格式 EH see 件 
有 为。 Mavieaima billiae se] ME 
ES 


图 12.14 将 选中 的 要 素 另 存 为 矢量 文件 
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(7) 核实 输出 图 层 确 实 只 包含 建筑 物 。 
另存 完成 后 ，QGIS 也 会 将 该 文件 添加 到 地 图 中 。 通 过 图 层 管理 器 ， 关 闭 bonn_polygons 
图 层 , 只 显示 bonn_buildings 图 层 , 结果 如 图 12.15 所 示 , 这 便 是 我 们 希望 的 内 容 与 格式 数据 。 


图 12.15 ”只 包含 建筑 物 要 素 的 图 层 


12.5.2 ”使 用 OpenStreetMap 查询 API 下 载 数据 


OSM 提供 了 一 个 主要 的 API 用 于 编辑 数据 库 中 的 内 容 。 但 是 大 部 分 使 用 OSM 数据 库 的 
应 用 程序 却 并 不 用 于 编辑 数据 ， 而 只 是 显示 数据 库 中 的 内 容 。 为 了 实现 显示 要 求 ， 需 要 使 用 
不 同 的 选择 条 件 执行 查询 ， 这 通常 会 返回 大 量 的 地 理 数据 。 因 此 为 了 满足 这 些 以 显示 为 目的 
需求 ，OSM 以 一 种 效率 更 高 的 方式 提供 了 几 个 只 读 接口 。 

最 初 开发 的 是 基于 主要 API 的 名 为 XAPI (eXtended API) 的 只 读 API， 可 实现 增强 的 搜 
索 功 能 。 

后 来 , 开发 了 使 用 更 强大 查询 语言 的 Overpass API。Overpass API 接受 两 种 查询 语言 ， 分 
别 是 Overpass QL 与 Overpass XML， 前 者 是 后 者 的 一 个 简化 版 本 。 为 了 兼容 ，Overpass API 
中 也 支持 使 用 XAPI 来 查询 。 当 前 提供 Overpass API 服务 的 主要 有 3 个 著名 的 服务 器 ， 它 们 
分 别 是 : 


http://overpass.osm.rambler.ru 


http://www.overpass-api.de 


http://api.openstreetmap.fr 


此 外 ， 还 有 一 个 名 为 Overpass turbo 的 基于 Web 的 OSM 数据 挖掘 工具 ， 其 访问 地 址 是 
http://overpass-turbo.eu。 该 工具 可 运行 任何 Overpass API 查询 ， 并 以 交互 地 图 与 数据 两 种 方式 
显示 查询 结果 。 

(1) 使 用 XAPI 获取 数据 。 

在 浏览 器 地 址 栏 中 输入 如 下 地 址 : 

http://www.overpass-api.de/api/xapi_meta?*[building=yes][bbox=7.01,50.68,7.15,50.78] 
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当 响 应 返回 时 ， 会 提示 保存 文件 ， 将 文件 保存 为 buildings.osm。 在 文本 编辑 工具 中 打开 
该 文件 ， 就 会 看 到 使 用 OSM 格式 化 的 XML 表达 的 波恩 城市 的 建筑 物 数据 。 

从 网 址 中 包含 xapi， 可 看 出 使 用 的 是 XAPI 来 查询 OSM。 

(2) 使 用 Overpass API 获取 JSON 格式 的 数据 。 

在 浏览 器 地 址 栏 中 输入 如 下 地 址 : 

http://overpass.osm.rambler.ru/cgi/interpreter?data=[out:json];node[name~holtorf](50.7,7.1,50. 
78,7.20);out; 

该 请 求 用 于 查询 德国 波恩 城市 节点 名 称 中 包含 “holtorf” 的 要 素 。 响 应 结果 是 图 12.16 中 
所 示 的 包含 16 个 节点 的 JSON 格式 的 数据 。 


httpy/overpass.787.20kout x | + 


和 志 | 轩 overpassosmramblerruco CGC 及 二 罗 | 三 


nversion": 0.6, 
"generator": "Overpass API", 
"osm3s": { 

"timestamp_osm base": "2015-04-19T13:13:022", 
"copyright™: "The daca included in this 
document is from ww.openstreermap.org. The data 
is made available under ODbL." 

} 


"elements": [ 
‘ 
"cype": "node", 


"id": 69291491, 
"lat": 50.7: 


a 
name": "Niederholcorf Micce", 
"Public_transport": "stop_position" 


图 12.16 ”请求 指定 范围 内 满足 条 件 的 JSON 格式 的 数据 


从 请 求 地 址 可 以 看 出 ，Overpass API 的 语法 与 XAPI 完全 不 同 。 更 重要 的 是 , 指定 范围 时 
两 者 经 纬度 的 顺序 也 完全 相反 。 
(3) 使 用 Overpass API 获取 XML 格式 的 数据 。 
Overpass API 默认 返回 的 就 是 XML 格式 的 数据 , 因此 在 前 面 的 地 址 中 去 掉 “[out:json];”， 
便 可 返回 XML 格式 的 数据 。 请 求 格式 如 下 : 
http://overpass.osm.rambler.ru/cgi/interpreter?data=node[name~holtorf]%2850.7,7.1,50.78,7.2 
0%29;out; 
(4) 使 用 OpenLayer 查看 查询 结果 。 
Overpass API 服务 器 还 提供 了 直接 使 用 OpenLayers 查看 返回 数据 的 功能 。 例 如 对 于 上 述 
请 求 ， 使 用 Overpass API 查询 OSM， 并 使 用 OpenLayers 查看 查询 结果 的 地 址 如 下 : 
http://overpass-api.de/api/convert?data=node[name~holtorf](50.7.7.1,50.78,7.20);out;&target= 
openlayers&zoom=12&lat=50.72&lon=7.1 
该 请 求 返回 图 12.17 所 示 的 响应 。 
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| OSM3s on Maprik via Open-. x | + 


志 ) 图 mm=Tapcsofaerc7ivc| 昌 和 了 | 三 


Found 16 features. 
下 


有 


ES 和 
图 12.17 使 用 OpenLayers 查看 查询 结果 
(5) 使 用 Overpass turbo 查询 并 下 载 数 据 。 
在 浏览 器 中 ， 进 入 http://overpass-turbo.eu 页 面 。 在 查询 文本 框 中 输入 如 下 内 容 : 


[out:ison]; 
way["building"="yes"](50.71,7.07,50.72,7.08); 
(> 

out; 


上 述 查 询 用 于 获取 德国 波恩 小 范围 地 区 的 建筑 物 。 由 于 在 浏览 嚣 中 运行 ， 如 果 将 范围 设 
置 得 很 大 ， 所 返回 的 数据 会 很 多 ， 浏 览 器 将 难以 承受 。 因 此 ， 我 们 这 里 使 用 了 比较 小 的 地 理 
范围 。 

然后 单 击 “Run ”按钮 , 执行 查询 。 查 询 完成 后 , 在 地 图 窗口 的 工具 栏 中 单 击 “zoom to data” 
按钮 ， 定 位 到 查询 获取 的 数据 位 置 。 便 可 看 到 查询 得 到 图 12.18 所 示 的 结果 。 

- 5 


| @ werpess to x 十 


€ overpass-turbo.eu/s cl 4 rl- 人 es 


. 
Ren | Share | Exporl We || Save | Lomd | Setings | talp overpass + Meer 
rs 


eT 
EE 4 
le 
$ 


By 


目 | 
A 

[Ha ET 一 
C3 总 a 
9 sp noces: 2472, ways: 407 ralatons: 0 
4 Ls Deasplayed — pols: 1, lines. 0, polygons. 407 


12.18 利用 Overpass turbo 查询 数据 
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在 地 图 窗口 的 右上 面 ， 可 单 寺 
得 到 查询 的 数据 后 ， 便 可 单 寺 


12.6 实践 20: 城市 天 气 预报 系统 开发 


“Data” 按 钮 来 查看 数据 。 
“Export” 按 钮 来 输出 指定 格式 的 数据 。 


Em Em 


本 实践 以 实例 来 说 明 如 何 融 合 Yahoo! 的 服务 ， 以 实现 全 世界 主要 城市 天 气 预报 。 
12.6.1 ”服务 准备 与 页 面 设计 


(1) 发 布 服务 。 

将 下 载 文件 “Data\Major_ World_Cities” 文 件 夹 中 的 Major_World_Cities.shp 文件 发 布 为 
服务 。 该 数据 包含 了 世界 主要 城市 的 点 数据 ， 空 间 位 置 字段 为 the_geom， 城 市 名 称 字 段 为 
NAME。 

(2) 页 面 设计 。 

新 建 一 个 名 为 Walkthrough21 的 文件 夹 ， 在 其 中 加 入 名 为 WeatherForecast.html 的 文件 。 

该 文件 的 内 容 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 混 搭 Yahoo! 的 天 气 服务 </title> 
<link href="css/Main.css" rel="stylesheet" /> 
<script src="http://cdnis.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.is"> 
</script> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script sre=" WeatherForecast.js"></script> 
</head> 
<body onload="initO"> 
<div id="map"></div> 
</body> 
</html> 


页 面 将 样式 都 放置 在 css 文件 夹 中 的 Main.css 文件 中 了 ，JavaScript 代码 都 放置 在 
WeatherForecastjs 文件 中 。 


12.6.2 ”代码 实现 


(1) 设置 全 局 变量 。 
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在 Walkthrough21 文件 夹 中 新 建 一 个 名 为 WeatherForecast.js 文件 。 在 其 中 加 入 如 下 代码 ， 
用 于 设置 全 局 变量 : 


Var WGS84 = new OpenLayers.Projection("EPSG:4326"); // WGS 1984 
var mercator = new OpenLayers.Projection("EPSG:900913"); // Web 墨 卡 托 投影 
var map , selectControl; 
var WeatherIconMap =[ 
'storm,', 'storm', 'storm', ‘ightning', ‘lightning', 'snow', hail', "hail', 
"drizzle', 'drizzle', ‘rain', 'rain', Train'，snow', 'snOW', 'snOW', snow' 
‘hail’, ‘hail', 'fog', 'fog', 'fog', ‘fog', ‘wind', ‘wind', 'snowflake’, 
‘cloud', 'cloud_moon', 'cloud_sun', 'cloud_moon', 'cloud_sun', 'moon', 'sun', 
‘moon', 'sun', ‘hail’, ‘sun', ‘lightning', ‘lightning'’, ‘lightning', ‘rain', 
'snowflake', 'snowflake', 'snowflake', 'cloud’, ‘rain', 'snow', lightning' 
}; 


(2) 地 图 初始 化 并 加 入 WFS 图 层 。 
在 上 述 代 码 下 面 ， 加 入 如 下 代码 ， 用 于 实现 地 图 初始 化 ， 并 在 地 图 中 加 入 OSM 与 
Major_World_Cities 专题 图 层 ， 以 及 加 入 监听 要 素 选择 事件 的 控件 。 


function init() { 
map = new OpenLayers.Map("map"); 


// 使 用 OpenStreetMap 作为 基础 底 图 
Var baseLayer = new OpenLayers.Layer.OSM(""); 


var wfs layer = new OpenLayers.Layer.Vector("Maior cities", { 
strategies: [new OpenLayers.Strategy.Fixed()], 
protocol: new OpenLayers.Protocol. WFS({ 
version: "1.1.0", 
/ 数据 加 载 的 URL 路 径 
url: "http://localhost:8080/geoserver/wfs", 
/ 工作 区 关联 的 命名 空间 URI 
featureNS: "http://localhost:8080/geoserver/webgis", 
/ 图 层 名 称 
featureType: "Major World Cities", 
// 空间 坐标 所 在 字段 名 
geometryName: "the_geom", 
schema: 
"http://localhost:8080/geoserver/wfs/DescribeFeatureType?version=1.1.0&:;typename=webgis:Major World Cities" 
D 
D); 
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map.addLayers([baseLayer, wfs layer]); 
Var lonlat = new OpenLayers.LonLat(115.45, 40.3).transform(WGS84, mercator); 
map.setCenter(lonlat, 3); 


selectControl = new OpenLayers.Control.SelectFeature([wfs layer], { 
onSelect: onFeatureSelect, 
onUnselect: onFeatureUnselect 


DD); 


map.addControl(selectControl); 
selectControl.activate(); 


} 


(3) 获取 城市 天 气 预报 。 

当 用 户 在 地 图 上 选择 某 一 个 城市 时 ， 将 调用 onFeatureSelect 函数 。 我 们 需要 在 该 函数 中 
实现 从 Yahoo! 服 务 获取 该 城市 的 天 气 预报 。 

在 WeatherForecast.js 文件 中 ， 继 续 加 入 如 下 代码 : 


function onFeatureSelect(feature) { 
Var results; 
var q= "select * from geo.places where text=" + feature.attributes.NAME + 
" "+ feature.attributes.COUNTRY + ""; 
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + 
encodeURIComponent(q) + '&format=json'; 
Var woeid, content; 
S$.ajax({ 
async: false, url: yql, dataType: 'json’, 
success: function (r) { 
if (r.query.count =— 1) { 
woeid = .query .results.place.woeid; 
b 
else if (r.query.count > 1) { 
woeid = .query results.place[0].woeid; 
上 
q= "select * from weather.forecast where woeid=" + woeid + "and u='c"; 
yql= 'http://query.yahooapis.com/v1/public/yql?q=" + 
encodeURIComponent(q) + '&format=json'; 
S$.ajax({ 
async: false, url: yql, dataType: json', 
success: function (D) { 
if (r.query.results.channel.item.title =— 'City not found) { 
content = '<p>Information unavailable</p>"; 
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上 
else { 
Var item = r.query.results.channel.item.condition; 
content = '<p>' + Tr.query.results.channel.title + '</p><div id="weather" 
class="loaded" ><ul id="scroller"> + 
‘<li><img src="images/icons/' + weatherIconMap[item.code] + '.png"/>'+ 
'<p class="day"> 当 前 </p>' + 
"<p class="cond">' + item.text 十 
'<b>' + item.temp +'"°C</b></p></li>'; 
var length = r.query.results.channel.item.forecastlength; 
for (var i= 0;i< length; i++) { 
item = T.query.results.channel.item.forecast[i]; 
content += 
‘<l><img sre="images/icons/' + weatherIconMap[item.code] +'.png"/>'+ 
‘<p class="day">' + item.day + '</p>'+ 
‘<p class="cond">' + item.text + 
‘<b>' + item.low + °C/'+item.high + °C</b></p></li>'; 
} 
content += "</ul>'+ 
'<button onclick="showPrevSlide()" class="arrow previous"></button>' + 
'<button onclick="showNextSlide()" class="arrow next"></button>' + 
‘</div>'; 


popup = new OpenLayers.Popup.FramedCloud("chicken", 
feature.geometry.getBounds().getCenterLonLat(), 


new OpenLayers.Size(100, 100), 
content, 


null, true, onPopupClose); 
feature.popup = popup; 
map.addPopup(popup); 


D); 
currentSlide = 0; 


有 


我 们 将 在 该 函数 中 首先 根据 用 户 选择 的 城市 图 形 的 NAME 属性 来 构造 YQL 查询 语句 ， 
查询 geo.places 数据 表 ， 得 到 该 城市 的 woeid， 然 后 利用 该 woeid 构造 一 个 查询 语句 ， 查 询 
weather.forecast 便 可 得 到 天 气 预报 。 

在 上 述 代码 中 利用 了 jQuery 的 ajax 的 方法 执行 REST 查询 。 
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(4) 实现 分 屏 显示 多 天 天 气 预 报 。 

由 于 Yahoo! 天 气 服务 一 般 会 返回 5 天 的 天 气 预报 ， 我 们 都 加 入 到 信息 模板 的 内 容 中 了 ， 
但 一 次 只 显示 一 天 的 天 气 ， 对 于 其 他 天 的 天 气 情况 ， 需 要 利用 前 进 按钮 或 后 退 按钮 来 查看 。 
前 进 与 后 退 按钮 对 于 的 函数 代码 如 下 : 


(5) 要 素 取消 选择 事件 处 理 与 信息 框 关闭 事件 处 理 。 
加 入 如 下 两 个 函数 ， 分 别 用 于 处 理 要 素 取消 选择 事件 处 理 与 信息 框 关闭 事件 。 
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delete feature.popup; 
bs 
} 
function onPopupClose(evt) { 
selectControl.unselectAll(); 
} 


(6) 样式 实现 。 

样式 代码 Main.css 及 相关 图 片 ， 请 直接 复制 下 载 文件 “Codes\Walkthrough21” 文 件 夹 中 
的 内 容 。 

(7) 代码 运行 与 调试 。 

在 浏览 器 中 打开 WeatherForecasthtml 文件 ， 便 可 查看 世界 主要 城市 的 天 气 预报 了 ， 如 图 
12.19 所 示 。 


混搭 Vahool 的 天 气 服务 x \t 


PE 


mn my 


12.19 ”混搭 Yahoo! 天 气 服务 


12.7 习 


(1) 仔细 阅读 以 下 两 个 网 址 的 文档 ， 学 习 Overpass API 及 其 语法 : 


® http:/wiki.openstreetmap.org/wiki/Overpass_API 

® http:/wiki.openstreetmap.org/wiki/Overpass_APILanguage_Guide 

(2) 利用 实践 20 介绍 的 方法 ， 从 OpenStreetMap 下 载 自己 所 在 城市 的 街道 数据 ， 并 将 
其 转 为 Shapefile 格式 。 


(3) 开发 一 个 Web GIS 应 用 程序 ， 使 用 GeoNames 提供 的 Web 服务 ， 查 询 当 前 地 图 显 
示范 围 内 的 维基 百科 文章 。 参 考 界 面 如 图 12.20 所 示 。 
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旺 示 文章 数目 5 


二 soo。 


Carey fmala 


T6050 mi (M60 bn) 
7931 9m R0541 km) 


取 并 在 地 图 上 显示 对 应 的 点 要 素 。 单 击 点 要 素 能 显示 其 对 应 的 相片 。 参 考 界面 如 图 12.21 所 示 。 


Storm is coming... 
: nobody@flick.com (Ula P) 


图 12.21 混搭 Flickr 的 相册 服务 


(5) 在 互联 网 上 寻找 一 个 使 用 OpenStreetMap 的 Web GIS 应 用 ,编写 一 个 文档 ， 描 述 如 
下 内 容 : 
。 该 应 用 程序 的 目的 以 及 URL; 
。 该 应 用 程序 是 如 何 使 用 OpenStreetMap 的 。 例 如 ， 只 是 简单 地 使 用 了 OpenStreetMap 
的 地 图 切片 ， 还 是 使 用 了 原始 数据 来 创建 专题 图 层 等 ; 
。 使 用 OpenStreetMap 给 该 应 用 程序 引入 哪些 优点 和 缺点 ; 
。 提出 在 该 应 用 程序 中 使 用 OpenStreetMap 更 恰当 的 方法 。 


(6) 通过 OpenStreetMap 基于 浏览 器 的 编辑 器 (http:/www.openstreetmap.org/ ) ， 往 
OpenStreetMap 数据 库 中 加 入 自己 所 在 城市 或 所 熟悉 的 其 他 地 方 的 数据 。 
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